Is z-index outdated?
What positioning method would be the best for this design?
The design looks like a fun coding challenge but I am confused about what method would be the best in this case. Should I go with div-inline-blocks, CSS grid, flexbox, relative-absolute positioning or a little bit of everything?
I want to make it responsive, of course, and keep my code as elegant as possible (considering that I will have many little visual details throughout the layout).
I would probably use relative positioning to nudge the boxes up a bit to make the overlap, it’s a lot less dangerous than using absolute. You just need to leave enough padding-bottom on the previous element for the overlap to clear your content.
No, just misunderstood and abused. Since the later elements overlap on top of previous elements, you probably won’t need it, but don’t quote me.
Would steer clear of Bootstrap with this. It does straight grids, but anything beyond that or a little different, it’s not the tool for the job.
Then you need to start by dreaming up how you want it to look on the small screen. Then make it happen.
Short answer: When the stacking order is not what you want it to be.
The natural stacking order places child elements and subsequent elements on top of parent and previous elements.
So for example if you altered this design so the first elements overlapped the later ones (opposite to what you have) you would need to alter the z-index to make that happen.
It looked like an interesting challenge, so I had a go at a simplified attempt at the first layout.
It uses a lot of flex, maybe grid could do it, but I’m not so familiar with that.
The css could be optimised a bit I think, as it was thrown together thinking on my feet. It may be better re-organised in mobile first, as most stuff in the query is just resetting to a standard “block on block” layout.
Not perfect but a good start.
Note just one z-index, of the pseudo element that “shadows” the footer nav, that exists to fill in the gap left by the relative position shift at the bottom of the page. Now I think of it, I could have used the pseudo to fake the overlap instead…