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 índice

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:

Correcto en Firefox Correcto en Internet Explorer 
p { 
  background-color: white; 
  border: black 1px solid; 
  position: relative; 
  top: 20px;
}

Este párrafo no tiene posicionamiento absoluto relativo.

Este párrafo sí tiene posicionamiento absoluto relativo.

Este párrafo no tiene posicionamiento absoluto relativo.
Correcto en Firefox Correcto en Internet Explorer 
p { 
  background-color: white; 
  border: black 1px solid; 
  position: relative; 
  top: -20px;
}

Este párrafo no tiene posicionamiento absoluto relativo.

Este párrafo sí tiene posicionamiento absoluto relativo.

Este párrafo no tiene posicionamiento absoluto relativo.
Correcto en Firefox Correcto en Internet Explorer 
p { 
  background-color: white; 
  border: black 1px solid; 
  position: relative; 
  bottom: 20px;
}

Este párrafo no tiene posicionamiento absoluto relativo.

Este párrafo sí tiene posicionamiento absoluto relativo.

Este párrafo no tiene posicionamiento absoluto relativo.
Correcto en Firefox Correcto en Internet Explorer 
p { 
  background-color: white; 
  border: black 1px solid; 
  position: relative; 
  bottom: -20px;
}

Este párrafo no tiene posicionamiento absoluto relativo.

Este párrafo sí tiene posicionamiento absoluto relativo.

Este párrafo no tiene posicionamiento absoluto relativo.

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

Correcto en Firefox Correcto en Internet Explorer 
p { 
  background-color: white; 
  border: black 1px solid; 
  position: relative; 
  left: 20px;
}

Este párrafo no tiene posicionamiento absoluto relativo.

Este párrafo sí tiene posicionamiento absoluto relativo.

Este párrafo no tiene posicionamiento absoluto relativo.
Correcto en Firefox Correcto en Internet Explorer 
p { 
  background-color: white; 
  border: black 1px solid; 
  position: relative; 
  left: -20px;
}

Este párrafo no tiene posicionamiento absoluto relativo.

Este párrafo sí tiene posicionamiento absoluto relativo.

Este párrafo no tiene posicionamiento absoluto relativo.
Correcto en Firefox Correcto en Internet Explorer 
p { 
  background-color: white; 
  border: black 1px solid; 
  position: relative; 
  right: 20px;
}

Este párrafo no tiene posicionamiento absoluto relativo.

Este párrafo sí tiene posicionamiento absoluto relativo.

Este párrafo no tiene posicionamiento absoluto relativo.
Correcto en Firefox Correcto en Internet Explorer 
p { 
  background-color: white; 
  border: black 1px solid; 
  position: relative; 
  right: -20px;
}

Este párrafo no tiene posicionamiento absoluto relativo.

Este párrafo sí tiene posicionamiento absoluto relativo.

Este párrafo no tiene posicionamiento absoluto relativo.

Volver al índice

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

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.

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.

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

Los valores de las propiedades se interpretan como en el caso del posicionamiento absoluto (position: absolute). La página de ejemplo de posicionamiento absoluto muestra varios párrafos con posicionamiento absoluto. En este ejemplo los valores están expresados en porcentaje (que se interpretan como porcentajes de la ventana completa).

Internet Explorer no aplica correctamente el posicionamiento fijo (position: fixed) a una tabla. Coloca la leyenda (<caption>) en el lugar correcto, pero no las celdas de la tabla. Firefox lo hace bien. Si la tabla está metida en una división y el posicionamiento lo tiene la división, Internet Explorer ya lo hace bien.

Volver al índice

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.

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

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.

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

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

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.

Volver al índice

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 
<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 
<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 
<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 
<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 
<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 
<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 índice

Autor: Bartolomé Sintes Marco
Última modificación: 20 de enero de 2009