Help creating a generic overlapping grid rule.
I'm new to css and want to know if there are any clear problems with the attached approach.
Ideally I should be able to use this for any two items.
The result should be two stacked items on the z-axis, with the second item being on top.
Are there any limitations to this approach?
e.g will it break if the children use position absolute.
What's the best practice when layering overlapping items?
3 Replies
that's fine to use
afaicr grid children have a stacking context created for their cell, so position absolute will reference the original location of the grid cell instead of 0,0 or the 0,0 of the nearest parent with position relative
You could create an auto-flow if you add more items to the grid so they will auto stack and use nth child with the n iterator or even :odd keywords
Heya! The other way is for the parent to have grid-template-areas: "whatevername"; and each child can have grid-area: wahtevername; The benefit to this approach is you avoid magic numbers (1/1). And by naming them the intention of your CSS becomes more clear!