NOTE: display: stack does not exist. Read on for more info.
Background
Two and half years ago, I wrote a post on Medium about this possible new kind of display I called stack that "would be a hybrid of flexbox and z-index".
https://medium.com/@alexpds/css-display-stack-7bdc02bc1434
This new layout method, would allow the ‘stack’ wrapping element to automatically assume the height of the tallest of it’s childs.
So, with similar syntax to flexbox, we could override the order (z-order) of the various elements, more or less like we can with z-index, but the tallest child would affect the ‘stack’ height and thus no issues with unwanted overflows, uncontrollable overlaps.
Grid to the rescue!
Back then (May 2017), CSS Grid was still being defined and if what I'm showing below was possible back then I didn't know.
But today CSS Grid support is very broad and it allows exactly what I described in the original article.
.stack {
display: grid;
grid-template-areas: "stack"; /* or whatever name you prefer */
}
.stack > * {
grid-area: stack; /* same name as used above without quotes */
}
.stack .top-most {
z-index: 1; /* default order is 0. Highest shows on top */
}
Example on CodeSandbox
https://codesandbox.io/s/dry-worker-0nv9b
Top comments (0)