Los valores de posicion en css
fuente
{
position:valor;
}
Los cuatro valores.
posicion puede tomar 4 valores : static, relative, absolute, y fixed. El defecto es static ; Para cualquier otro valor hay que aplicar la declaración CSS.
El bloque contenedor.
Para especificar la posición exacta de un elemento css, hay que indicar las propiedades : top,bottm,left y right. Estas son las coordenadas relativas al punto de referencia. Pero... ¿Cual es ese punto? eso depende de la posicion.
position: static: (defecto) No hay punto de referencia, un bloque estático no puede ser movido, su posición depende del flujo html/cssposition: relative: El punto de referencia es la posición del elemento que le toca si en el flujo html/css. Para que se entienda (o liarlo mas) , static es lo mismo que relative con coordenadas cero.position: absolute: La referencia es el bloque que lo contiene, que es el primer bloque antecesor que no sea estático. Si no existe tal bloque, el <html> sirve de contenedor (en los viejos navegadores, es el <body≶ el que hace de contenedor por defecto).position: fixed: La ventana del navegador.
static
Un elemento con position: static sigue el flujo de la pagina.No puede ser movido del flujo, y ignora las declaraciones top,bottom,left y right
relative
Un elemento con position: relative inicialmente tiene la posición del flujo normal de la página, pero luego es movido por los valores top, bottom, left, and/or right declarados. El espacio que originalmente tenía el elemento queda vacío. puesto que el flujo no se vuelve a recalcular.(comprobar).
Tiene que quedar claro que el flujo normal de la página, actua como si el elemento ocupara el lugar y posteriormente lo cambia de sitio, por lo que su sitio no es ocupado.
Al hacer esto, el elmento se pierde o pisa otros.... No suele ser interesante, pero suele usarse para servir de contenedor. como un static no puede servir de contenedor a un elemento absoluto, un truco es ponerlo relativo con coordenadas 0.
absolute
Un elemento con position: absolute es sacado fuera del norma flujo de la página y posicionado en la coordenadas relativas la bloque que lo contiene.
Como el elemento con posicion absoluta es sacado fuera del flujo normal del documento. i.e. el normal flujo del documento se comporta como si el elemento no existiera, y al final, se posiciona en el lugar indicado por left,right.....
fixed
Un elemento con position: fixed no entra en el flujo normal del documento y posicionado en las coordenadas indicadas relativas a la ventana del browser. Y permanece alli incluso si hay scroll.
No hay comentarios:
Publicar un comentario