CSS: Posicionamiento absoluto

Esquema de posicionamiento absoluto: position

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

• static: posicionamiento absoluto estático
• relative: posicionamiento absoluto relativo
• fixed: posicionamiento absoluto fijo
• absolute: posicionamiento absoluto 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:

• La propiedad top desplaza el elemento contando desde su borde superior. Si se da un valor positivo, el elemento se desplaza hacia abajo. Si se da un valor negativo, el elemento se desplaza hacia arriba.

  p.desplazado {
    background-color: white;
    border: black 1px solid;
    position: relative;
    top: 20px;
  }
  

  

  p.desplazado {
    background-color: white;
    border: black 1px solid;
    position: relative;
    top: -20px;
  }
  

  
• La propiedad bottom desplaza el elemento contando desde su borde inferior. Si se da un valor positivo, el elemento se desplaza hacia arriba. Si se da un valor negativo, el elemento se desplaza hacia abajo.

  p.desplazado {
    background-color: white;
    border: black 1px solid;
    position: relative;
    bottom: 20px;
  }
  

  

  p.desplazado {
    background-color: white;
    border: black 1px solid;
    position: relative;
    bottom: -20px;
  }
  

  

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

• La propiedad left desplaza el elemento contando desde su borde izquierdo. Si se da un valor positivo, el elemento se desplaza hacia la derecha. Si se da un valor negativo, el elemento se desplaza hacia la izquierda.

  p.desplazado {
    background-color: white;
    border: black 1px solid;
    position: relative;
    left: 20px;
  }
  

  

  p.desplazado {
    background-color: white;
    border: black 1px solid;
    position: relative;
    left: -20px;
  }
  

  
• La propiedad right desplaza el elemento contando desde su borde derecho. Si se da un valor positivo, el elemento se desplaza hacia la izquierda. Si se da un valor negativo, el elemento se desplaza hacia la derecha.

  p.desplazado {
    background-color: white;
    border: black 1px solid;
    position: relative;
    right: 20px;
  }
  

  

  p.desplazado {
    background-color: white;
    border: black 1px solid;
    position: relative;
    right: -20px;
  }
  

  

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:

• top: posición del lado superior del elemento contando desde el borde superior de la ventana (de arriba a abajo, es decir, cuanto más grande es el valor más hacia abajo se coloca el elemento).
• bottom: posición del lado inferior del elemento contando desde el borde inferior de la ventana (de abajo a arriba, es decir, cuanto más grande es el valor más hacia arriba se coloca el elemento).
• height: altura del elemento.
• left: posición del lado izquierdo del elemento contando desde el borde izquierdo de la ventana (de izquierda a derecha, es decir, cuanto más grande es el valor más hacia la derecha se coloca el elemento).
• right: posición del lado derecho del elemento contando desde el borde derecho de la ventana (de izquierda a derecha, es decir, cuanto más grande es el valor más hacia la izquierda se coloca el elemento).
• width: anchura del elemento.

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 horizontal, los navegadores hacen caso de las propiedades left y width y descartan el valor de right, como puede comprobarse en esta página de ejemplo de posicionamiento. En esa página los valores están expresados en porcentaje (que se interpretan como porcentajes de la ventana completa).
• en vertical, los navegadores hacen caso de las propiedades top y height y descartan el valor de bottom, como puede comprobarse en esta página de ejemplo de posicionamiento. En esa página los valores están expresados en porcentaje (que se interpretan como porcentajes de la ventana completa).

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

• en vertical, dando el tamaño necesario para alojar todo el contenido del elemento
• en horizontal, ocupando todo el espacio disponible hasta el extremo de la ventana (o hasta que aloje todo el contenido del elemento)

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 elementos sin propiedad z-index se tratan como si tuviera un z-index igual a 0.
• Los elementos sin posicionamiento se tratan como si tuvieran un z-index igual a 0 (aunque tengan propiedad z-index).
• Los elementos con mayor z-index se colocan sobre los elementos con menor z-index,
• Si los z-index son iguales, los elementos con posicionamiento se colocan sobre los elementos sin posicionamiento
• Si los z-index son iguales y los elementos tienen posicionamiento, los elementos que aparecen después en el código fuente se colocan encima de los elementos que aparecen antes en el código fuente

Los ejemplos siguientes ilustran algunas de las situaciones que pueden 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>

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>

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>

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

p.p2 {
  background-color: #DDDDDD;
  height: 150px; left: 0;
  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>

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

p.p2 {
  background-color: #DDDDDD;
  height: 150px;
  left: 0;
  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>

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

p.p2 {
  background-color: #DDDDDD;
  height: 150px;
  left: 0;
  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>

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

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