La posición de los elementos HTML es tan importante como el modelo de cajas y su aspecto. CSS ofrece la propiedad position que permite controlar la posición de las cajas de los elementos. Por tanto, esta propiedad posiciona elementos en el lugar deseado de una página web, en un espacio 2D (ejes X e Y).
Si lo que se quiere es poner elementos por delante o por detrás de otros se usa la propiedad z-index, ya que permite establecer un «orden de apilamiento». Es decir, permite indicar un nivel de profundidad a través del eje Z.
Propiedades para modificar el posicionamiento de elementos:
position | Indica el tipo de posicionamiento de un elemento. |
z-index | Indica el orden de profundidad de un elemento. |
Además, cuando un elemento no está posicionado por defecto —equivalente a estar declarado como estático (position: static)— se puede hacer uso de una serie de propiedades CSS que sirven para indicar la distancia de un elemento respecto a una ubicación (arriba, abajo, izquierda y derecha). En este punto, es conveniente conocer la siguientes propiedades para posicionar elementos.
Propiedades de distancia:
| Propiedad | Descripción |
|---|---|
top | Desplaza un elemento desde arriba (descendente). |
bottom | Desplaza un elemento desde abajo (ascendente). |
left | Desplaza un elemento desde la izquierda hacia la derecha. |
right | Desplaza un elemento desde la derecha hacia la izquierda. |
Tipos de posicionamiento
Los navegadores web crean las cajas de forma automática y las posicionan en el documento HTML según varios factores. Pero utilizando las propiedades que proporciona CSS se puede alterar el tipo de posicionamiento de cada caja. Gracias a ello es posible diseñar o estructurar plantillas.
Mediante la propiedad CSS position se puede especificar varios tipos de posicionamiento: estático, relativo, absoluto, fijo y pegado.
Para crear elementos flotantes hay que usar la propiedad float.
Tabla de valores de la propiedad position:
| Valor | Descripción |
|---|---|
static | Elemento posicionado según el flujo normal del documento. |
relative | Posición relativa, según su posición original. |
absolute | Posición absoluta, según el elemento padre. |
fixed | Posición fija, según el área del documento. |
sticky | Posición pegajosa y desplazada al bajar. |
Posición estática
La posición estática de un elemento HTML es la posición que mostrará el navegador web por defecto. Los elementos que tienen un posicionamiento estático no se ven afectados por las propiedades CSS top, bottom, left y right, sino que siguen el flujo normal de la página.
Se aplica con la propiedad position y el valor static.
Lo único que se tiene en cuenta en este tipo de posicionamiento es lo siguiente: el tipo de elemento —si es elemento de bloque o elemento de línea—, el valor de las propiedades width y height, en caso de que se hayan especificado, y su contenido en caso de tener que calcular el tamaño.
Cuando los elementos son de bloque, se muestran uno por encima del otro, ya que su caja ocupa el ancho máximo hasta los límites de su elemento contenedor. En este caso, la distancia entre las cajas se controla con los márgenes verticales (propiedades margin-top y margin-bottom).
El elemento contenedor es el que tiene a otros elementos entre sus etiquetas de apertura y cierre; también es conocido como elemento “padre”. Este elemento determina el tamaño y la posición de los elementos “hijos”.
Ejemplo de posición de tres elementos de bloque:
.bloque {
margin-bottom: 10px;
position: static;
}
Resultado:
Elemento 1Elemento 2Elemento 3
En cambio, cuando los elementos son de línea, se muestran uno al lado del otro empezando por la izquierda de su elemento contenedor. Su anchura viene determinada por el cálculo global de la caja (contenido + relleno + bordes). En este caso, la distancia entre las cajas se controla mediante los márgenes laterales, es decir, las propiedades margin-left y margin-right.
Ejemplo de posición de tres elementos de línea:
.linea {
margin-right: 10px;
position: static;
}
Resultado:
Elemento 1Elemento 2Elemento 3
Cuando los elementos de línea superan el ancho establecido por su elemento contenedor, se reubican en la línea siguiente.
Posición relativa
La posición relativa de un elemento HTML desplaza su caja tomando como referencia su posición original, es decir, la que establece el navegador web por defecto (posición estática). El desplazamiento de la caja se controla mediante las propiedades top, bottom, left y right.
Se aplica con la propiedad position y el valor relative.
Por ejemplo, para crear un desplazamiento de arriba hacia abajo se usa la propiedad top y se le asigna un valor de longitud. La distancia indicada es el espacio que quedará entre el borde superior de la caja en su posición original y el borde superior de la caja en su posición final.
Ejemplo de posicionamiento relativo:
.rel {
position: relative;
top: 5px;
left: 40px;
}
Resultado:
Elemento 1Elemento 2Elemento 3
En este ejemplo, los elementos 1 y 3 tienen una posición estática y siguen el flujo natural de los elementos. El elemento 2, en cambio, tiene una posición relativa y se ha desplazado 5 píxeles hacia abajo y 40 píxeles hacia la derecha. El desplazamiento del elemento 2 no altera la posición de los demás.
Posición absoluta
Con la posición absoluta se desplaza un elemento HTML tomando como referencia al elemento contenedor más cercano que no esté declarado con posición estática. Es decir, que si su elemento “padre” más directo es estático, se mira al siguiente, y si no al siguiente, y así sucesivamente hasta encontrar uno.
Se aplica con la propiedad position y el valor absolute.
En caso de que el elemento que se quiere posicionar de forma absoluta no tenga un elemento contenedor con posición relativa, fija o pegajosa, se usará como referencia al documento entero. Si esto ocurre, el elemento aparecerá fijo en la pantalla y no se desplazará cuando el usuario deslice el documento.
Sea el caso que sea, el desplazamiento de la caja respecto al elemento contenedor no estático o al documento entero se controla con las propiedades top, bottom, left y right, tal y como funciona con las otras posiciones.
Ejemplo de posicionamiento absoluto:
.abs {
position: absolute;
top: 15px;
left: 40px;
}
Resultado:
Elemento 1Elemento 2Elemento 3
En este ejemplo, los elementos 1 y 3 tienen una posición estática (siguen el flujo normal de los elementos). Pero en este caso, el elemento 2 tiene una posición absoluta a partir de su elemento contenedor (<blockquote>), que tiene una posición relativa, por lo que no es estática.
El elemento 2 aparece desplazado 40 píxeles a la derecha y 15 píxeles abajo, dentro de su elemento contenedor. El resto de elementos HTML se reubican de tal forma que es como si el elemento 2 no existiera para ellos.
Para posicionar un elemento HTML respecto a su elemento contenedor, es imprescindible posicionar este último. El elemento contenedor deberá tener posición relativa (position: relative).
Posición fija
La posición fija de un elemento HTML desplaza su caja tomando como referencia la porción visible del documento (viewport). Los elementos fijos no se deslizan, por lo que su posición es inamovible dentro de la ventana del navegador. Este posicionamiento es muy usado en menús y botones.
Se aplica con la propiedad position y el valor fixed.
Se trata de un posicionamiento bastante parecido al absoluto, pero su diferencia es que en este caso, siempre será fijo porque siempre toma como referencia la ventana del navegador. El desplazamiento de la caja se controla mediante las propiedades top, bottom, left y right.
Esto significa que si se posiciona un elemento HTML a 20 píxeles de la izquierda y a 20 píxeles de arriba, siempre se verá en esta posición, independientemente de si el usuario se desliza o no hacia otras partes el documento.
Ejemplo de código CSS:
.fix {
position: fixed;
top: 20px;
left: 20px;
}
Se puede ver un ejemplo en el menú de este sitio web: cuando el usuario se desliza hacia abajo, el menú se queda fijado a la parte superior del navegador.
Posición pegajosa
La posición pegajosa (más conocida como sticky, en inglés) es una mezcla entre la posición relativa y la posición fija. El elemento HTML se comporta como si fuera relativo hasta que el usuario se desliza por el documento y dicho elemento alcanza un umbral que lo deja con una posición fija.
Se aplica con la propiedad position y el valor sticky.
El umbral se especifica con una de las propiedades CSS siguientes: top, bottom, left y right. Por ejemplo, con top: 30px se interpreta que el elemento se comporta de forma relativa, y cuando el usuario se desliza y el elemento queda a menos de 30 píxeles, se queda fijo arriba. Por tanto, más allá del umbral de los 30 píxeles el elemento quedará fijado a 30 píxeles de arriba.
Ejemplo de posicionamiento pegajoso (sticky):
.sti {
position: sticky;
top: 5px;
}
Resultado:
Usa la barra de desplazamiento vertical.
Elemento 1Elemento 2Elemento 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
En el ejemplo anterior, la posición inicial del elemento 2 sigue el flujo normal de los elementos, por lo que se comporta de la misma manera que los elementos 1 y 2. Pero cuando el usuario desplaza la barra vertical y el elemento 2 queda a 5 píxeles de la parte superior se queda pegado en esa zona.
La propiedad ‘z-index’ (capas de profundidad)
En determinados tipos de posicionamiento, los elementos pueden ponerse encima de otros. ¿Cuáles se verán por encima y cuáles quedarán por debajo? Este comportamiento se puede controlar mediante la propiedad z-index. En efecto, la “z” hace referencia al tercer eje: el de la profundidad.
Gracias a z-index podemos establecer un nivel de profundidad, también conocido como «orden de apilamiento». Su valor será un número entero. Un número más alto implica un nivel superior (se verá por encima) y un número más bajo indica un nivel inferior (se verá por debajo). Es así de fácil.
Hay que tener en cuenta que la propiedad z-index no funciona en elementos que tengan un posicionamiento estático (position: static), tal y como sucede con las propiedades top, bottom, left y right.
