CSS 2: Posicionamiento absoluto

Esquema absoluto: position

La propiedad position establece el esquema de posicionamiento absoluto de un elemento. Existen cuatro tipos en el esquema de posicionamiento absoluto:

Posicionamiento absoluto estático: static

Cuando se establece la propiedad position como static, el elemento se sitúa en la posición que le corresponde de acuerdo con el flujo normal del documento. Es decir, el posicionamiento absoluto estático es equivalente al esquema normal.

Posicionamiento absoluto relativo: relative

Cuando se establece la propiedad position como relative, el navegador reserva el espacio en la página que tendría el elemento de acuerdo con el flujo normal del documento, pero el elemento se puede desplazar con respecto a esa posición. Es decir, el "hueco" de la posición original se mantiene, aunque el elemento se haya desplazado, como muestran los siguientes ejemplos.

El desplazamiento relativo se establece mediante las propiedades top, bottom, left y right.

El desplazamiento vertical se puede establecer tanto con la propiedad top como con la propiedad bottom:

El desplazamiento horizontal se puede establecer tanto con la propiedad left como con la propiedad right:

Posicionamiento absoluto fijo y absoluto: propiedades top, right, bottom, left, width y height

Cuando se establece la propiedad position como fixed o como absolute, el elemento se puede situar en cualquier posición de la pantalla.

La posición del elemento se establece mediante las propiedades top, bottom, left y right (aunque también se pueden utilizar las propiedades width y height), como indica la imagen siguiente:

Ventana del navegador Elemento left right top bottom width height


Los elementos con posicionamiento absoluto absoluto o fijo no reservan espacio en la página, es decir, el navegador dibuja el resto de elementos de la página como si los elementos con posicionamiento no existieran, por lo que los elementos con posicionamiento pueden tapar otros elementos.


La página de ejemplo de posicionamiento absoluto muestra varios párrafos con posicionamiento absoluto. En esa página los valores están expresados en porcentaje (que se interpretan como porcentajes de la ventana completa).


De estas seis propiedades, basta con indicar cuatro de ellas: dos para la posición horizontal (a elegir entre left, right y width) y dos para la posición vertical (a elegir entre top, bottom y height). Si el elemento tiene un tamaño definido (por ejemplo, una imagen), es suficiente con utilizar una propiedad para la posición horizontal y otra para la vertical.

En caso de que se establezcan las tres propiedades de una dimensión:


En caso de que no se indiquen todas las propiedades, el navegador asigna el resto de valores como hace normalmente:

Posicionamiento absoluto fijo: fixed

Cuando se establece la propiedad position como fixed, el elemento se sitúa en la posición indicada y no se puede desplazar. Aunque la página sea larga y se pueda desplazar verticalmente, el elemento fijo estará siempre en la misma posición de la pantalla.

La página de ejemplo de posicionamiento fijo muestra una lista en forma de menú con posicionamiento fijo. Al mover la barra de desplazamiento, el menú se mantiene siempre en la misma posición.

El navegador no tiene en cuenta la posición de los elementos con posicionamiento absoluto fijo al mostrar el resto de elementos de la página, es decir, que los elementos con posicionamiento absoluto fijo no reservan espacio.

Posicionamiento absoluto absoluto: absolute

Cuando se establece la propiedad position como absolute, el elemento se sitúa en la posición exacta que se le indique. Pero si la página es larga y se puede desplazar verticalmente, el elemento absoluto se desplazará con el resto de elementos.

La página de ejemplo de posicionamiento absoluto muestra una lista en forma de menú con posicionamiento absoluto. Al mover la barra de desplazamiento o hacer clic en el menú, el menú desplaza.

El navegador no tiene en cuenta la posición de los elementos con posicionamiento absoluto absoluto al mostrar el resto de elementos de la página, es decir, que los elementos con posicionamiento absoluto absoluto no reservan espacio.

Profundidad: z-index

Al utilizar posicionamiento absoluto (relativo, fijo o absoluto) dos o más elementos se pueden solapar. La propiedad z-index, que debe ser un número entero (positivo, cero o negativo), permite establecer qué elemento se muestra encima, pero también influye si los elementos tienen o no posicionamiento y el orden en que aparecen los elementos en el código fuente.

Las reglas a aplicar son las siguientes:

Los ejemplos siguientes ilustran algunas de las situaciones que puden darse.


Si no se utiliza la propiedad z-index, cuando un elemento con posicionamiento se solapa sobre un elemento sin posicionamiento, el elemento con posicionamiento se muestra siempre encima, como se muestra en los ejemplos siguientes:

<p class="p1">Este es el primer párrafo.</p>

<p class="p2">Este es el segundo párrafo.</p>

Este es el primer párrafo.

Este es el segundo párrafo.

p.p1 {
  background-color: lightblue;
height: 150px;
width: 150px; }
p.p2 {   background-color: #DDDDDD;
height: 150px;
left: 50px;
position: relative; top: -50px; width: 150px; }
<p class="p1">Este es el primer párrafo.</p>

<p class="p2">Este es el segundo párrafo.</p>

Este es el primer párrafo.

Este es el segundo párrafo.

p.p1 {
  background-color: lightblue;
height: 150px;
left: 50px;
position: relative; top: 50px; width: 150px; }
p.p2 {   background-color: #DDDDDD;
height: 150px;
width: 150px; }

Si no se utiliza la propiedad z-index, cuando un elemento con posicionamiento se solapa sobre otro elemento con posicionamiento, los elementos se van solapando en el mismo orden en que aparecen en el código fuente, como se muestra en los ejemplos siguientes, en los que se puede observar cómo el segundo párrafo se superpone siempre al primero.

<p class="p1">Este es el primer párrafo.</p>

<p class="p2">Este es el segundo párrafo.</p>

Este es el primer párrafo.

Este es el segundo párrafo.

p.p1 {
  background-color: lightblue;
height: 150px;
left: 50px;
position: relative; top: 0px; width: 150px; }
p.p2 {   background-color: #DDDDDD;
height: 150px;
left: 0px;
position: relative; top: -50px; width: 150px; }
<p class="p1">Este es el primer párrafo.</p>

<p class="p2">Este es el segundo párrafo.</p>

Este es el primer párrafo.

Este es el segundo párrafo.

p.p1 {
  background-color: lightblue;
height: 150px;
left: 50px;
position: relative; top: 150px; width: 150px; }
p.p2 {   background-color: #DDDDDD;
height: 150px;
left: 0px;
position: relative; top: -150px; width: 150px; }

Si se utiliza la propiedad z-index y posicionamiento, los elementos con mayor z-index se colocan sobre los elementos con menor z-index. Los elementos sin z-index se tratan como si tuvieran un z-index igual a 0.

<p class="p1">Este es el primer párrafo.</p>

<p class="p2">Este es el segundo párrafo.</p>

Este es el primer párrafo.

Este es el segundo párrafo.

p.p1 {
  background-color: lightblue;
height: 150px;
left: 50px;
position: relative; top: 0px; width: 150px; z-index: 2; }
p.p2 {   background-color: #DDDDDD;
height: 150px;
left: 0px;
position: relative; top: -50px; width: 150px; z-index: 1 }
<p class="p1">Este es el primer párrafo.</p>

<p class="p2">Este es el segundo párrafo.</p>

Este es el primer párrafo.

Este es el segundo párrafo.

p.p1 {
  background-color: lightblue;
height: 150px;
left: 50px;
position: relative; top: 0px; width: 150px; z-index: 1; }
p.p2 {   background-color: #DDDDDD;
height: 150px;
left: 0px;
position: relative; top: -50px; width: 150px; }