Posicionamiento menos absoluto con CSS moderno | Programar Plus

Ahmad Shadeed escribe en su blog el sentimiento en el que quizás no necesitemos apoyarnos position: absolute tanto como pudimos tener en el pasado. Por un lado: apilar elementos. Por ejemplo, si tiene una pila de elementos que deben ir uno encima del otro…

.stack {
  display: grid;
}
.stack > * {
  grid-area: 1 / -1;
}

Todos los elementos ocupan la misma celda de cuadrícula en ese punto, pero aún puede usar la alineación y la justificación para mover las cosas y hacer que se vea y se comporte como desee.

lo que realmente estás diciendo con position: absolute es que quiero que este elemento se elimine por completo del flujo de modo que no afecte a otros elementos y otros elementos no lo afecten. A veces lo hace, pero podría decirse que con menos frecuencia de lo que su memoria muscular CSS existente le haría creer.

Tomaré una de las ideas de Ahmad aquí:

Tanto la etiqueta como el título están posicionados de una manera que podríamos pensar automáticamente en usar el posicionamiento absoluto. Pero nuevamente, algo como CSS Grid tiene todas las funciones de alineación que necesitamos no solo para apilarlas verticalmente, sino también para colocarlas justo donde queremos.

Enlace directo →

(Visited 2 times, 1 visits today)