Cómo apilar elementos en CSS | Programar Plus

Si desea crear experiencias visuales fantásticas y únicas en la web, eventualmente necesitará que dos elementos se superpongan o existan en el mismo lugar. Incluso puede que necesite colocarlos cerca o uno al lado del otro. Repasemos dos formas diferentes de lograr esto, una con la propiedad de posición y otra con CSS Grid.

Método 1: uso de la propiedad de posición

Puede que ya sepas que position: absolute; colocará algo absolutamente en la página donde quiera que esté. En este caso, estamos posicionando absolutamente al niño en la parte superior izquierda de la página. No importa dónde esté el padre, el niño será colocado en esa esquina, absolutamente.

.child {
  ...
  position: absolute;
  top: 0;
  left: 0;
}

Ver la pluma
CSS Stacking, Absolute 1 por Sarah Drasner (@sdras)
en CodePen.

¡Pero esto es muy frágil! ¿Qué pasa si colocas algo en la página y luego aparece algo más? Tal vez tenga un ícono dentro de una navegación que siempre desea en la esquina superior izquierda, pero un tercero ingresa y coloca un anuncio de banner. (No estoy abogando por anuncios de banner, pero existen). Esto empuja la navegación hacia abajo y ahora el ícono está fuera de lugar.

O digamos que desea crear un componente autónomo que pueda usar en varios lugares. Necesita que sea reutilizable y funcione dentro de su propio contexto, sin importar dónde lo use.

Si ponemos position: relative; en el elemento padre, cualquier cosa dentro de él con position: absolute; se colocará absolutamente, en relación con la unidad que lo contiene!

.child {
  /* ... */
  position: absolute;
  top: 0;
  left: 0;
}

.parent {
  position: relative;
}

Ver la pluma
CSS Stacking, Absolute 2 por Sarah Drasner (@sdras)
en CodePen.

Bonito.

Podemos usar esta misma premisa si quisiéramos apilar dos elementos uno encima del otro. Aquí, tendremos dos elementos secundarios apilados uno encima del otro y separados por 150 píxeles. Veremos que ahora están contenidos en ese mismo padre y permanecen posicionados dentro de él.

<div class="parent">
  <h2>Parent</h2>

  <div class="child child-1">
    <h2>Child 1</h2>
  </div>

  <div class="child child-2">
    <h2>Child 2</h2>
  </div>
</div>
.child {
  position: absolute;
  top: 0;
}

.child-1 {
  left: 0;
}

.child-2 {
  left: 150px;
}

.parent {
  position: relative;
}

Ver la pluma
CSS Stacking, Absolute 3 por Sarah Drasner (@sdras)
en CodePen.

Esta es una pequeña escuela de la vieja escuela, pero la he estado usando durante años y todavía la busco. Funciona de manera uniforme en todos los navegadores y puede ayudarlo a lograr incluso las ubicaciones más extrañas y únicas.

Método 2: usar CSS Grid

Otra buena forma de superponer elementos, apilarlos o modificar su ubicación es CSS Grid, dependiendo de qué tan atrás necesite admitir (lo que puede verificar con caniuse).

Podemos colocar algo donde lo necesitemos en el contenedor así:

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}

.child {
  grid-area: 1 / 1 / 2 / 2;
}

Ver la pluma
Apilamiento CSS, Cuadrícula 1 por Sarah Drasner (@sdras)
en CodePen.

Y si un elemento debe apilarse sobre el otro, podemos colocarlos exactamente en la misma área de la cuadrícula. Compensémoslos también ligeramente usando un margen.

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}

.child {
  grid-area: 1 / 1 / 2 / 2;
}

.child-2 {
  margin-left: 200px;
}

Ver la pluma
CSS Stacking, Grid 2 por Sarah Drasner (@sdras)
en CodePen.

Si esta técnica le resulta difícil de visualizar, he creado un generador de cuadrícula CSS que, con suerte, ayuda a ver las cosas con mayor claridad.

¡Hay tantos lugares para usar estas técnicas! Puede apilar, superponer y desplazar elementos. Puedes hacer navegaciones, pies de página. Puede crear casi cualquier tipo de diseño en el que desee tener un control más detallado de cómo se colocan los elementos en una página.