4 ms·
Many comments assume this is just a way to get z-indexes "above everything else", leading to lots of clever jokes. This is not the point though. If I understan
by goto11 4y ago
Many comments assume this is just a way to get z-indexes "above everything else", leading to lots of clever jokes.
This is not the point though. If I understand correctly, the "top layer" allows positioning elements on the z-axis independent of the parent stacking context. So kind of like absolute positioning on the z-axis.
z-index: 10000 is not something you actually need, it is typically the result of someone desperately trying to stack an element over another in a different stacking context. Stacking context are not always well understood, and most developers would intuitively expect an element with z-index 8 to cover an element with z-index 7. But this is only the case inside the same stacking context, not if they are in different subtrees.
The use cases for breaking out of the stacking context is where something like "portals" in React is used: https://reactjs.org/docs/portals.html https://reactjs.org/docs/portals.html
> A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips.
But portals are a complex hack, where "top layer" allows you to keep the logical document structure.
- nailer 4y agoSure but how do you put items above the top layer? Eg say I want a ‘x’ graphic on top of my modal? Or behind it? If there’s value here I can’t see it from their blog post and demos.
- goto11 4y agoThe elements in the "top layer" are stacked in the order they are "promoted" - for dialog elements this is when showModal() is called. So the element on which showModal() was most recently called is on top. If you want another dialog on top, call showModal on that. https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogE...
- nailer 4y agoThanks, though that wasn't quite my question - do you still stack elements within a top layer using z-index?
- deleted 4y ago[deleted]
- goto11 4y agoElements promoted to the top layer stack according to the order they are promoted. Inside a promoted element, child elements are stacked according to the regular layout rules, i.e. same as if the element wasn't promoted. Think of the "top layer" as similar to inserting an element as the last child of the document body. This is how modals and overlays are usually implemented - by inserting the element last (and position it absolutely) it will automatically stack higher than anything else in the document. At least until something else is inserted last. Z-index is actually not that useful for stacking elements (whether in top layer or not) since it only works inside the scope of a stacking context. Element order is a better way to control stacking.