Sin duda, la posición La propiedad es una de las herramientas más útiles que los diseñadores tienen en su caja de herramientas CSS. Sin embargo, hay algunos conceptos sobre el posicionamiento que pueden desconcertar a los principiantes.
Primero, ¿qué es el posicionamiento?
Cuando su navegador abre una página web, comienza a representar elementos (divs, párrafos, encabezados, etc.) en el orden en que aparecen en el marcado HTML de la página. El posicionamiento es una forma natural de organizar cómo se muestran los elementos y una solución fácil a situaciones como las superposiciones. Hay cuatro tipos de posicionamiento:estático , pariente , absoluto y fijo .
Los elementos se colocan estáticamente de forma predeterminada
El posicionamiento predeterminado, que se aplica implícitamente a cada elemento de la página, es estático . El posicionamiento estático significa que cada elemento se coloca en el orden natural en que se agrega a la página. Los elementos de bloque se muestran debajo de otros elementos de bloque y los elementos en línea se muestran junto a otros elementos en línea.
Posicionamiento relativo
Establecer el posicionamiento en relativo no produce por sí mismo ninguna diferencia notable en la forma en que se muestra el elemento en la página. Pero ahora puede moverlo desde su posición normal con la parte superior , izquierda , abajo y correcto propiedades CSS. Esto es realmente útil cuando se trata de situaciones en las que necesita compensar un elemento, pero no anclarlo a una posición específica en la página.
.relativeDiv{
/*
Moving the div to the top-left
from where it would normally show:
*/
position:relative;
top:-50px;
left:-100px;
}
Posicionamiento fijo
Agregar posición:fija a las declaraciones CSS de un elemento, lo posiciona en relación con la ventana del navegador. Esto le permite mostrar barras de herramientas, botones o menús de navegación, que están anclados en una posición fija y se desplazan con la página.
.fixedDiv{
/*
Fixing the div 20 px from the bottom
of the browser window:
*/
position:fixed;
right:20px;
bottom:20px;
}
Probablemente el único inconveniente es que este posicionamiento no es compatible con navegadores más antiguos como IE6, si no puede permitirse el lujo de dejar de admitirlos.
Posicionamiento absoluto
Un elemento absolutamente posicionado se muestra en la página en relación con el documento , o un elemento principal con un posicionamiento diferente al estático . De esta forma, utilizando la parte superior , izquierda , abajo y correcto Propiedades CSS, puede especificar una posición exacta. Esto también le brinda la capacidad de centrar divisiones horizontal y verticalmente, lo cual discutimos en "Centrar una división tanto horizontal como verticalmente" MicroTut.
.parentDiv{
/* Absolute and Fixed positioning would work as well: */
position:relative;
}
.absoluteDiv{
/*
Displaying the div 50px from the right and 90px from
the top of its parent because of the explicit positioning
*/
position:absolute;
right:50px;
top:90px;
}
Los beneficios
Con estas propiedades de posicionamiento, puede lograr todo tipo de diseños de página avanzados, que llevarán sus diseños al siguiente nivel. Junto con el z-index propiedad, puede cambiar las reglas de superposición predeterminadas que se aplican a los elementos (los elementos que aparecen más adelante en el código se muestran encima de los anteriores).
¿Cuál es el mejor diseño que has hecho con las propiedades de posicionamiento? Presume en la sección de comentarios a continuación.