Popper-core: How to manage z-index issues?
CodePen demo
https://codepen.io/sontek/pen/OOMmvN
Steps to reproduce the problem
The popper is below both the content and the absolute positioned footer. How can I make sure it is above them?
What is the expected behavior?
The popper to be above the absolute positioned footer.
What went wrong?
The popper is below it.
sontek
All 8 comments
https://codepen.io/FezVrasta/pen/QOyvVg ?
The thing is, any z-index higher than 3 denotes a lack of understanding of how it works.
FezVrasta
on 2 Nov 2017
@FezVrasta Sorry, we have z-index higher than 3 because we use an opensource react component that has set their z-index higher than that and we have to pop above it.
Your pen gets it above the content but not the absolute positioned footer, which is my problem. Shrink your window so the gray box is closer to the popper
sontek
on 2 Nov 2017
isolation: isolate is your best friend.
z-index is thought to be used in "stack contexts", you just create small stacks with few elements (and then, few layers)
FezVrasta
on 2 Nov 2017
@FezVrasta Yeah, but isolation isn't supported in any IE (even modern ones), correct?
sontek
on 2 Nov 2017
There are plenty of alternatives:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
FezVrasta
on 2 Nov 2017
So what would be the best way to handle a thing like what I'm doing here? In the codepen you posted its just z-index: 1 and z-index: 2 but the popper doesn't go above the absolute positioned element that has the lower z-index.
sontek
on 2 Nov 2017
You want to have a stacking context for the page layout, and then on top of it you put a other elements (like the popper) that with just a z-index: 1 will stay above the rest
FezVrasta
on 2 Nov 2017
So basically popper.js eschews the problem of browsers missing a global z-index (*), which is the main reason for positioning popups in js in the first place. I kept wondering "how does popper keep the popups on top of everything if it doesn't move them to the root element, since there might be implicit z-stacks created along the path?" Now I know: it doesn't.
(*) Let's face it, stacking contexts are just an abstraction leak of the graphics model. Saying "create shallow context stacks" is not helpful as there's plenty of legit use cases that create implicit z-stacks.
capr
on 5 Aug 2020
Related issues
FezVrasta
·
5Comments
cixonline
·
5Comments
DawnWright
·
4Comments
kerf007
·
3Comments
FezVrasta
·
3Comments
Most helpful comment
So basically popper.js eschews the problem of browsers missing a global z-index (*), which is the main reason for positioning popups in js in the first place. I kept wondering "how does popper keep the popups on top of everything if it doesn't move them to the root element, since there might be implicit z-stacks created along the path?" Now I know: it doesn't.
(*) Let's face it, stacking contexts are just an abstraction leak of the graphics model. Saying "create shallow context stacks" is not helpful as there's plenty of legit use cases that create implicit z-stacks.