Volver al índice Posicionamiento absoluto

En esta página se tratan los siguientes temas:

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.

Volver al principio de la página

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:

Volver al principio de la página

Posicionamiento absoluto fijo y absoluto: propiedades top, bottom, left, right, 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:

Propiedades top bottom left right width height

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).

Nota: Si la posición de un elemento se establece mediante las propiedades bottom y top en vez de con las propiedades top y height (o bottom y height), Internet Explorer 7 muestra correctamente el elemento. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.

Nota: Si la posición de un elemento se establece mediante las propiedades left y right en vez de con las propiedades left y width (o right y width), Internet Explorer 7 muestra correctamente el elemento. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.

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:

Volver al principio de la página

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.

Nota: Internet Explorer 7 no aplicaba correctamente el posicionamiento fijo (position: fixed) a una tabla, como se comenta en la página de diferencias entre IE8 e IE7.

Nota: Internet Explorer 6 no era capaz de representar este tipo de posicionamiento, como se comenta en la página de diferencias entre IE7 e IE6.

Volver al principio de la página

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.

Nota: Internet Explorer 6 no representaba correctamente este tipo de posicionamiento, como se comenta en la página de diferencias entre IE7 e IE6.

Volver al principio de la página

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:

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome 
<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; 
}
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome 
<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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome 
<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; 
}
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome 
<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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome 
<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
}
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome 
<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; 
}

Volver al principio de la página

Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 20 de diciembre de 2010

Creative Commons License
Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.