El contenido de la siguiente imagen es la base para tener un manejo apropiado del posicionamiento de objetos web y en especial para el uso de DIV con CSS:
1.- Position STATIC:
El posicionamiento por defecto para todos los elementos es position: static, lo que significa que el elemento no estará posicionado y aparecerá donde normalmente debería hacerlo (siempre en su lugar original). Normalmente no deberá especificarse a no ser que deba modificarse una posición previamente definida, ignora por completo las propiedades de desplazamiento.
Ejemplo:
2.- Position RELATIVE:
En caso de especificarse position: relative, podrán utilizarse los valores top o bottom, right o left para posicionar el elemento en la posición relativa donde inicialmente debería aparecer. En el siguiente ejemplo el div se posicionará 20 pixeles hacia abajo y 40px a la derecha de su posición original.
Ejemplo:
3.- Position ABSOLUTE:
Cuando se especifica position:absolute, el elemento será desplazado colocado en función del primer elemento padre posicionado en que se encuentre (normalmente será el body).
La diferencia del posicionamiento relativo, los demás elementos ocuparán su posición.
Ejemplo:
4.- Position FIXED:
Se comporta igual que con el valor absolute pero aquí al mover las barras de desplazamiento de la ventana, (siempre que la página ocupe más espacio que la ventana), la caja se queda inmóvil, por lo que no se moverá con el resto de la ventana. En el ejemplo, si desplazamos la ventana con la barra de desplazamiento lateral (derecha) vemos que mientras el resto de la página se desplaza, la caja fija queda en el mismo sitio en la pantalla.
Ejemplo:
No hay comentarios:
Publicar un comentario