CSS: Posiciones

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 las siguientes propiedades para posicionar elementos.

Propiedades de distancia:

Propiedad Descripción
top Desplaza un elemento desde arriba (descendente).
right Desplaza un elemento desde la derecha hacia la izquierda.
bottom Desplaza un elemento desde abajo (ascendente).
left Desplaza un elemento desde la izquierda hacia la derecha.
inset Abreviatura para las cuatro propiedades anteriores.

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 1
Elemento 2
Elemento 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 1
Elemento 2
Elemento 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 1
Elemento 2
Elemento 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 1
Elemento 2
Elemento 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.

La propiedad de distancia ‘top’

La propiedad top especifica la posición de un elemento partiendo desde arriba. Si el elemento tiene una posición absoluta (absolute) o fija (fixed), la propiedad top determina la distancia entre el borde superior del elemento y el borde superior de su elemento contenedor (padre). Pero si la posición es relativa (relative), desplaza el elemento desde arriba hacia abajo.

Ejemplo de distancia desde arriba:

.contenedor {
  position: relative;
}

.elemento {
  background: salmon;
  position: absolute;
}

.top {
  top: 10px;
}

Código CSS:

Finalmente, la propiedad right indicará la posición de un elemento tomando la derecha como referencia. Si el elemento está posicionado de forma absoluta o fija, la propiedad right determina la distancia entre el borde derecho del elemento y el borde derecho de su elemento contenedor (padre). Si la posición del elemento es relativa, el elemento se desplaza desde la izquierda hacia la derecha.

Ejemplo de distancia desde la derecha:

.contenedor {
  position: relative;
}

.elemento {
  background: salmon;
  position: absolute;
}

.right {
  right: 20%;
}

Código CSS:

La propiedad de distancia ‘bottom’

Con la propiedad bottom se indica la ubicación de un elemento partiendo desde abajo. Si el elemento está posicionado con absolute o fixed, la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su elemento contenedor (padre). Pero si la posición es relative, desplaza el elemento desde abajo hacia arriba.

Ejemplo de distancia desde abajo:

.contenedor {
  position: relative;
}

.elemento {
  background: salmon;
  position: absolute;
}

.top {
  bottom: 3px;
}

Código CSS:

La propiedad de distancia ‘left’

Por su parte, la propiedad left permite posicionar un elemento partiendo desde la izquierda. En los elementos posicionados de forma absoluta o fija, la propiedad left determina la distancia entre el borde izquierdo del elemento y el borde izquierdo de su elemento contenedor (padre). Pero si la posición del elemento es relativa, el elemento se desplaza desde la derecha hacia la izquierda.

Ejemplo de distancia desde la izquierda:

.contenedor {
  position: relative;
}

.elemento {
  background: salmon;
  position: absolute;
}

.left {
  left: 25%;
}

Código CSS:

La propiedad de distancias ‘inset’

La propiedad inset es una abreviatura (shorthand) que permite determinar la posición de un elemento partiendo de los cuatro lados: arriba, derecha, abajo e izquierda. Esta propiedad admite de uno a cuatro valores, y es que funciona de forma similar a las abreviaturas de márgenes y rellenos.

Así, cuando se indica un único valor se aplica a los cuatro lados por igual. Con dos valores, el primero se aplica al eje vertical (arriba y abajo) y el segundo al eje horizontal (derecha e izquierda). Con tres valores, el primero se aplica arriba, el segundo al eje horizontal (derecha e izquierda) y el tercero abajo. Con cuatro valores, se sigue el orden de las agujas del reloj.

Tabla resumen de las posiciones abreviadas:

Ejemplos Descripción
inset: 1px A los cuatro lados.
inset: 1px 2px Vertical, horizontal.
inset: 1px 2px 3px Arriba, horizontal, abajo.
inset: 1px 2px 3px 4px Arriba, derecha, abajo, izquierda.

Ejemplo de distancias usando inset:

.contenedor {
  position: relative;
}

.elemento {
  background: salmon;
  position: absolute;
}

.inset {
  inset: 10px 25%;
}

Código CSS:

← Artículo anterior
Artículo siguiente →