Posicionamiento relativo y absoluto — CSS: Posicionamiento de elementos

• ¿Por qué no siempre es útil el posicionamiento absoluto respecto a la página?
• Posicionar un botón de cierre dentro de un bloque
  • Clave: el posicionamiento relativo del padre
  • Código de ejemplo

Hasta ahora, hemos hablado de cómo el posicionamiento absoluto sitúa un elemento en la página en relación con el borde del navegador. Sin embargo, este comportamiento no siempre es lo que queremos. A veces, necesitamos colocar un elemento en relación con otro, como en el caso de una ventana emergente con un botón de cierre en la esquina.

¿Por qué no siempre es útil el posicionamiento absoluto respecto a la página?

Hay dos razones principales:

👉 Queremos posicionar un elemento en relación con su contenedor, no con toda la página.
Imagina que tienes una tarjeta con un botón de cierre en la esquina superior derecha. Si el botón se posiciona respecto a la página, se moverá fuera de la tarjeta, lo que no es lo que buscamos.

👉 El tamaño de la página puede cambiar.
Si un elemento se posiciona absolutamente en la página, sus coordenadas se calcularán desde el borde superior izquierdo de la página. Pero si la página cambia de tamaño (por ejemplo, si el usuario redimensiona la ventana del navegador), ese elemento puede moverse de una forma no deseada.

Posicionar un botón de cierre dentro de un bloque

Vamos a ver un caso práctico: queremos crear un cuadro con un botón de cierre en la esquina superior derecha. Queremos que este botón siempre esté dentro del cuadro, sin importar dónde esté ubicado en la página.

Aquí es donde el posicionamiento absoluto nos ayuda. Con top y right, podemos asegurarnos de que el botón esté siempre en la esquina de su contenedor.

Pero, ¿cómo hacemos para que este botón se posicione dentro del bloque en lugar de hacerlo en toda la página?

La clave es el posicionamiento relativo en el elemento padre.

Clave: el posicionamiento relativo del padre

Por defecto, un elemento con position: absolute se posiciona en relación con el borde de la página, a menos que uno de sus elementos padres tenga un posicionamiento diferente al estándar (estático). Si el contenedor del botón tiene position: relative;, cualquier elemento dentro de él que tenga position: absolute; se posicionará en relación a este contenedor, y no a toda la página.

Código de ejemplo

<div class="modal">
  <button class="close-button">X</button>
  <p>Este es un cuadro modal con un botón para cerrarlo.</p>
</div>

.modal {
  position: relative; /* Hacemos que este elemento sea el referente para los elementos absolutos dentro de él */
  width: 300px;
  padding: 20px;
  background: lightgray;
  border: 1px solid black;
}

.close-button {
  position: absolute; /* Lo posicionamos en relación con el .modal */
  top: 10px;  /* Se coloca 10px desde la parte superior del .modal */
  right: 10px; /* Se coloca 10px desde la parte derecha del .modal */
  background: red;
  color: white;
  border: none;
  padding: 5px;
  cursor: pointer;
}

¿Qué está pasando aquí?

1️⃣ .modal tiene position: relative;, lo que significa que cualquier elemento con position: absolute; dentro de él se posicionará en relación al contenedor .modal en lugar de a la página.

2️⃣ .close-button tiene position: absolute;, lo que le permite moverse usando top y right dentro del .modal, situándose en la esquina superior derecha.

Como resultado, el botón siempre quedará en la esquina superior derecha del cuadro, sin importar dónde esté ubicado el cuadro en la página.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen