Cómo apilar elementos en CSS

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. Es posible que incluso necesite que se coloquen 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: usar la propiedad de posición

Es posible que ya sepas que position: absolute;colocará algo absolutamente en la página donde quieras 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 ese rincón, absolutamente.

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

¡Pero esto es muy frágil! ¿Qué pasaría si colocaras algo en la página y luego apareciera algo más despué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 publicitario. (No estoy defendiendo los anuncios publicitarios, pero existen). Esto empuja la navegación hacia abajo y ahora el ícono está fuera de lugar.

O decimos que deseamos 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 colocamos position: relative;el elemento padre, todo lo que esté dentro de él position: absolute;se colocará de manera absoluta, en relación con la unidad contenedora.

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

Lindo.

Podemos utilizar 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  h2Parent/h2  div    h2Child 1/h2  /div  div    h2Child 2/h2  /div/div

.child {  position: absolute;  top: 0;}.child-1 {  left: 0;}.child-2 {  left: 150px;}.parent {  position: relative;}

Esto es un poco de la vieja escuela, pero lo he estado usando durante años y todavía lo utilizo. Funciona de manera consistente en todos los navegadores y puede ayudar 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 en CSS Grid, dependiendo de qué tan atrás necesite soportar (lo cual puede verificar con caniuse).

Podemos colocar algo donde lo necesitemos en el contenedor como este:

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

Y si un elemento debe apilarse sobre el otro, podemos colocarlos exactamente en la misma área de la cuadrícula. También compensémoslos 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;}

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

¡Hay tantos lugares para utilizar 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.