10 ms·

The top layer: a solution to z-index:10000

118 points by feross 4y ago

aargh_aargh 4y ago
But why? And is this a new thing? Or an existing thing gaining visibility in devtools?
- deleted 4y ago
  [deleted]
- rafaelturk 4y ago
  yeah.. why?
- moralestapia 4y ago
  Someone at Google had to justify its 6 figure salary. Plus s/he probably made a point about how this will ensure modal ads coming on top of everything else.
  - immibis 4y ago
    You joke but I've read this is literally how Google's internal politics work.
    - djbusby 4y ago
      It's any $BigCo. The work isn't for the community, it's to impress your manager, with fanfare, and get your name on something and that raise/promotion. A truly FOSS Chromium team, or a revitalized Firefox team would be better for managing rendering engines and specs. Maybe just taking the big guys out of the specs would be a good start.
    - moralestapia 4y ago
      LOL, but I wasn't joking.
kingo55 4y ago
Wait till we need to place elements higher than on the top layer. This will surely be abused by plugins.
- amluto 4y ago
  top-layer-index: 1 will be the default, and on top of that will be top-layer-index: 2
  - mattnewton 4y ago
    .futureproofHeader { z-index: 999 !important; top-layer: 999 !important; -webKit-actually-paint-me-last: true !inportant;
    - kingo55 4y ago
      .futureproofHeaderMax { z-index: 10000 !important; top-layer: 10000 !important; -webKit-actually-paint-me-last: true !important; -webkit-no-backsies: true !important;}
  - snoopy_telex 4y ago
    So last created layer wins the display? or can you indicate priority via css?
  - datadata 4y ago
    Just like the ordinal number in the study of infinite sets
- notriddle 4y ago
  1. This is straight up <https://devblogs.microsoft.com/oldnewthing/20110310-00/?p=11253 https://devblogs.microsoft.com/oldnewthing/20110310-00/?p=11...> and <https://devblogs.microsoft.com/oldnewthing/20050607-00/?p=35413 https://devblogs.microsoft.com/oldnewthing/20050607-00/?p=35...>. Since the Chrome team probably have at least one team member who reads that blog, they'll probably do the same thing and make this the "the buck stops here" rule for anything that doesn't have special privileges, like the browser itself or extensions. 2. There should be a webext-exclusive API for placing items above the top layer.
danjc 4y ago
This amp goes to 11 (https://youtu.be/KOO5S4vxi0o https://youtu.be/KOO5S4vxi0o)
bhaney 4y ago
This feels like the same kind of kludge as "!important" and will probably be similarly abused.
- RunSet 4y ago
  I am beginning to think that perhaps the world's largest advertising corporation should not be trusted with developing the leading web browser.
  - blowski 4y ago
    Beginning?
    - a1369209993 4y ago
      Some people are slow on the uptake. Better late than never, though.
gabereiser 4y ago
Yey! Now I can dismiss more notifications and adverts to subscribe to newsletters on every site I visit. Race to z-index:10001 has begun.
pupppet 4y ago
2 minutes after release- where’s the top-top layer option.
dreadlordbone 4y ago
How is this triggered? showModal() on an element? Or is it using this: https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen https://developer.mozilla.org/en-US/docs/Web/API/Element/req... Oh it's a feature of the <dialog> element I guess
jaywalk 4y ago
The blog post keeps mentioning that you "promote" things to the top layer... but how do you do that? I see absolutely nothing in the HTML, CSS or JS of the examples in the post that references anything new. Is this just a new way the browser displays the <dialog> element exclusively? I'm pretty confused.
- ijidak 4y ago
  Exact same question. I'm glad I'm not alone.
- mhink 4y ago
  This post is sort of an introduction to a topic that has already existed (in a low-key sort of way) for some time. I'll grant that the article is a little unclear when it comes to getting to the point, but maybe this'll help: The CSS2.1 spec [1] describes how stacking contexts work when painting the browser window. Traditionally, our mechanism for interacting with an element's stacking context has been more or less exclusively to set its z-index. The Fullscreen API spec [2] introduces a new stacking context called the "top layer", which has some unique properties. Most notably, things rendered in the "top layer" are always rendered on top of everything else, regardless of z-index. There is exactly one top layer per document. Parts of this spec also describe operations which can add and remove elements from the top layer. For example, the "fullscreen an element" operation adds it to the document's top layer. [3] This operation is invoked as part of the steps taken when a developer calls `requestFullscreen()` on a DOM element [4]. Now, the `<dialog>` element as specified in the latest HTML spec [5] also interacts with the page's top layer. When you call `.showModal()` on a dialog element, it gets added to the document's top layer. Note that although this is a completely different API, the commonality here is that we're also interacting with the top layer by adding and removing elements from it. The article also references some ongoing discussion [6] on a possible "popup" API which would also interact with the top layer, and which would be used for implementing various controls such as datepickers and dropdown lists. Hope that helps! 1: https://www.w3.org/TR/CSS2/zindex.html https://www.w3.org/TR/CSS2/zindex.html 2: https://fullscreen.spec.whatwg.org/ https://fullscreen.spec.whatwg.org/ 3: https://fullscreen.spec.whatwg.org/#fullscreen-an-element https://fullscreen.spec.whatwg.org/#fullscreen-an-element 4: https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen https://developer.mozilla.org/en-US/docs/Web/API/Element/req... 5: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element https://html.spec.whatwg.org/multipage/interactive-elements.... 6: https://open-ui.org/components/popup.research.explainer/ https://open-ui.org/components/popup.research.explainer/
deleted 4y ago
[deleted]
rafaelturk 4y ago
I'm still trying to grasp the real use of this.. IMO Looks like a bad solution for a problem that wasn't really that big
- jraph 4y ago
  Obviously a clever act of resistance within the Chrome team, providing a fantastic crap-blocking tool to which crap will be registered willingly. "outside of the document flow": that can't be clearer. It's almost imprudent.
- dangrossman 4y ago
  Small businesses build their websites by setting up on a platform like Shopify or Squarespace. They use a template and fill in the content. They add functionality to the site, like an email opt-in, a "free shipping if you order over $50" bar at the top of the page, a "contact us" button floating at the bottom, a bunch of social media icons floating on the side... via plug-ins/apps/scripts. They don't ever touch code. All those plug-ins/apps/scripts that provide this functionality to non-technical website owners as a service have no idea what the webpage DOM will look like, how it's coded, what other scripts you're loading on the page. They end up fighting to be on top with z-indexes, and that's how you end up with the website's main navigation being on top of instead of behind a modal dialog like a popup contact form, when the site owner wants it to be behind. This "top layer" means the stuff that isn't part of the page and should always be above the page can really be on top.
  - martin_a 4y ago
    Sounds like all that stuff which is now fighting over z-index, "implemented" by people with no clue at all, will be fighting over the top layer soon, when the people with no clue at all start throwing it together...
    - dangrossman 4y ago
      The problem is not these things fighting with each other, but fighting with the webpage design. It's fine if a contact form pops up over an email opt-in form, if the contact form is the more recent thing someone tried to open. It's not fine if the contact form appears behind the website's navigation menu because the website template designer gave the menu too high of a z-index value. Separating these third party overlays from the webpage is the improvement this offers.
jraph 4y ago
Neat. Yes please. The Web becomes usable again just by blocking the top layer.
- draw_down 4y ago
  Wow, that would be great actually. Right now heuristics to block “please sign up for the newsletter” dialogs is difficult to do. But hopefully in the future we can just selectively allow access to top layer for certain domains.
- t0mas88 4y ago
  Indeed, this is great. All newsletter popups, cookie popups, "are you sure you want to leave" popups, give us feedback popups... They will all go on the top layer so your adblocker could hide it all at once.
  - enbugger 4y ago
    That is the reason why the top layer will not be chosen
  - Aeolun 4y ago
    For that reason two dialogs will be opened in the same place. One on the top layer, and one on the layer below it.
- recursive 4y ago
  Except if that happened, they just wouldn't use it.
  - rekoil 4y ago
    They don't care about the 1% of users who will figure this out.
eurasiantiger 4y ago
”z-index: 10000” is a solution employed by people who have no idea what a stacking context is, and, consequently, do not know that one can define their own ”top layer” and have z-indexes inside that work completely separate from the rest of the document. Just set ”position: relative” on an element and it will start a new stacking context, and stack it within the underlying context. It’s like having a card in a card stack be another stack of cards.
- cyral 4y ago
  I don't blame them when the rules for what creates a stacking context look like this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positio...
HaNdTriX 4y ago
Anyone ranting about this feature, has ever implemented an aria compliant website?
coldtea 4y ago
The "top layer" as a solution to the z-index: 10000 problem, sounds like "this goes to 11" as the solution to having a bigger guitar amp output...
- deathanatos 4y ago
  I'm a dancer. "Take it from the top" means to start a run through of the current piece from the beginning. Except … we were practicing a section of a piece. And then we started digging into the details on a very specific portion of footwork in the middle of that section. And our choreographer, instead of saying "start from the section", said, "start from the top". And humans being what they are, we all understood, somehow, and the right thing was done without complaint. But then came the need to start from the beginning, at which point she now had to differentiate from what she had been calling (erroneously) "top", and uttered "start from the top top". Some amount of playful joshing followed … and then the term stuck.
zerocrates 4y ago
I'm not saying they haven't earned this kind of treatment necessarily, but it is a little exhausting how much negativity and assumption of bad faith there is here in the commentary on more or less everything Google does. This even is just an explainer of a concept that's implemented by all the vendors, and as far as I know isn't something Google has railroaded.
- jiggawatts 4y ago
  Google is turning into Microsoft the 90s and 2010s. They're not only monopolistic, they abuse that monopoly power often just because they can, in a careless way that only the obscenely powerful can do. That has soured people's opinion of them. Long gone are the days of "Do no evil" in their mission statement. Now evil is just a casual stepping stone on the path of squeezing out every eyeball-second from the products.. err.. I mean "customers".
- dmitriid 4y ago
  The only reason they talk about dialog and "how great it is" is because they want to kill a alert/prompt/confirm. https://dev.to/richharris/stay-alert-d https://dev.to/richharris/stay-alert-d Even if they were talking about removing dialog entirely https://twitter.com/voxpelli/status/1423207772498415616 https://twitter.com/voxpelli/status/1423207772498415616 (and none of the issues with dialog have been resolved since) So this top layer bullshit is just a hack to make another hack work. It's not a usable long-term solution, and expect more hacks to deal with this hack in the future.
- nailer 4y ago
  I mean have you read the Twitter thread defending the web components APIs to a very polite Rich Harris pointing out some rather strange design choices? They’re not nice. They’re an ad company that made good products in the early 2000s.
robocat 4y ago
I always wanted a relative z-index. Example: <year dropdown> over <date picker> over <modal form> over <desktop style app> A complex “desktop style” UI, that shows a modal form over it, and the modal form contains a custom date input component. Click the date input and a custom date entry pop up component is drawn above the modal form to pick the date. On the custom date entry pop up is a year picker, which you click and a custom year dropdown is shown. This was an actual example from my past (I’m not saying it couldn’t have been done better, but this was before there were many better ways to do it). Using absolute z-index required complex coordination between components. The top-layer at least solves the problem of covering the viewport and providing a backdrop (difficult to do reliably, especially 10 years ago). Although I can think of other issues one still needs to solve: disabling inputs and events behind “modal” pop up, disabling iPad background scrolling, must be accessibility, can need multiple layers of popups e.g. loading spinner, problem of tab key handling, et cetera.
- marcosdumay 4y ago
  I believe CSS has an option that you set to make all z-indexes relative to the element. Making the page hierarchical. It's not exactly what you asked for, but it does void the need to coordinate between too many components.
  - fleddr 4y ago
    Yes, set position:relative on a parent element, then set position:absolute with a z-index on the child element. The z-index will be relative to the parent, not to the document.
    - robocat 4y ago
      One of the wonders of CSS (well, browsers) is that you can devote a decade to learning all the various details, and still not know something so fundamental. Thank you. I don’t want to believe I could miss that, but I have been humbled enough times to be doubtful about my beliefs.
bastawhiz 4y ago
Unfortunately, you can't practically use this today because it has only very recently been added to Safari (March 2022). I guess something to look forward to in two to three years.
- deleted 4y ago
  [deleted]
throwaway1851 4y ago
Vue 3’s <Teleport> component pretty much solves this, as any component can inject a part of its template to anywhere else in the DOM (edit: even outside of the app’s root element). Very nice feature.
- ramesh31 4y ago
  >Vue 3’s <Teleport> component pretty much solves this, It's so funny to me how transparently contrarian the entire Vue community is. No no, they're totally not React Portals which have existed for 5 years... they're Vue Teleports!
  - throwaway1851 4y ago
    I’ve never used React. Was just posting a (potentially) helpful tip. What were you saying again about being contrarian?
PaulDavisThe1st 4y ago
"In 2022 we brought you z-index:10000 and a lot of web UI developers used this to create masterful new models of interactivity within the browser. But we've heard your feedback, and today, in 2023, we bring you the "topper-layer", accessed using z-index:12000. You might be wondering if we're going to stop here. The answer of course, is no. We have a roll-out plan for the next 8 years which will culminate in z-index:100000. Some of you might be asking if our plans for the super-topper-most-mostest-layer are really just reducing this all back to "normal" z-index stacking in the document flow. We'll leave that as a discussion for the forums, while we get back to work."
- hoten 4y ago
  At the risk of reading too much into a joke, what about the top layer / stack suggests this would later beg for a "topper layer"?
- ramesh31 4y ago
  You joke, but z-index really is one of the worst decisions in the CSS spec. So. Many. Footguns. There really is almost no case in which a combination of DOM hierarchy and positioning isn't sufficient.
- threatripper 4y ago
  z-index YYYYMMDD
  - matsemann 4y ago
    Actually not that bad. If everyone assumed today's date to be the max value, one could always add something new on top without having to guess whatever value someone else has used, and risk exhausting the range because someone uses the max value.
    - trevvr 4y ago
      But what's today for me is yesterday in New Zealand and if I'm on the West Coast of the US or Hawaii then that can go on for a 'long time'? If I then go +1 then that's just going to end up in the same rat race / breakages.
TheRealPomax 4y ago
This is a joke, right?
woojoo666 4y ago
Z-index is a relic of the imperative styles of the past. Why are we building on top of it, further entrenching us into imperative territory? We should be replacing z-index with something more compatible with modern functional frameworks like React
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 ago
  Sure 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 ago
    The 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 ago
      Thanks, though that wasn't quite my question - do you still stack elements within a top layer using z-index?
vladstudio 4y ago
why only one top layer? why not just "layers"? Unpoly has solved this quite elegantly: https://unpoly.com/up.layer https://unpoly.com/up.layer
myfonj 4y ago
Obligatory nitpick: max z-index is obviously not 10_000 but 2_147_483_647. (2^31-1) [1][2] [1] http://web.archive.org/web/20160604042509/http://www.puidokas.com/max-z-index/ http://web.archive.org/web/20160604042509/http://www.puidoka... [2] https://codepen.io/myf/pen/QWmRZEJ?editors=0011 https://codepen.io/myf/pen/QWmRZEJ?editors=0011 (2147483647)
butz 4y ago
z-index: 10000? Amateurs. Hubspot web chat button leaves it in the dust with its z-index: 2147483647. Try to top that.

118 points by feross 4y ago

aargh_aargh 4y ago

But why? And is this a new thing? Or an existing thing gaining visibility in devtools?

deleted 4y ago
[deleted]
rafaelturk 4y ago
yeah.. why?
moralestapia 4y ago
Someone at Google had to justify its 6 figure salary. Plus s/he probably made a point about how this will ensure modal ads coming on top of everything else.
- immibis 4y ago
  You joke but I've read this is literally how Google's internal politics work.
  - djbusby 4y ago
    It's any $BigCo. The work isn't for the community, it's to impress your manager, with fanfare, and get your name on something and that raise/promotion. A truly FOSS Chromium team, or a revitalized Firefox team would be better for managing rendering engines and specs. Maybe just taking the big guys out of the specs would be a good start.
  - moralestapia 4y ago
    LOL, but I wasn't joking.

kingo55 4y ago

Wait till we need to place elements higher than on the top layer. This will surely be abused by plugins.

amluto 4y ago
top-layer-index: 1 will be the default, and on top of that will be top-layer-index: 2
- mattnewton 4y ago
  .futureproofHeader { z-index: 999 !important; top-layer: 999 !important; -webKit-actually-paint-me-last: true !inportant;
  - kingo55 4y ago
    .futureproofHeaderMax { z-index: 10000 !important; top-layer: 10000 !important; -webKit-actually-paint-me-last: true !important; -webkit-no-backsies: true !important;}
- snoopy_telex 4y ago
  So last created layer wins the display? or can you indicate priority via css?
- datadata 4y ago
  Just like the ordinal number in the study of infinite sets
notriddle 4y ago
1. This is straight up <https://devblogs.microsoft.com/oldnewthing/20110310-00/?p=11253 https://devblogs.microsoft.com/oldnewthing/20110310-00/?p=11...> and <https://devblogs.microsoft.com/oldnewthing/20050607-00/?p=35413 https://devblogs.microsoft.com/oldnewthing/20050607-00/?p=35...>. Since the Chrome team probably have at least one team member who reads that blog, they'll probably do the same thing and make this the "the buck stops here" rule for anything that doesn't have special privileges, like the browser itself or extensions. 2. There should be a webext-exclusive API for placing items above the top layer.

danjc 4y ago

This amp goes to 11 (https://youtu.be/KOO5S4vxi0o https://youtu.be/KOO5S4vxi0o)

bhaney 4y ago

This feels like the same kind of kludge as "!important" and will probably be similarly abused.

RunSet 4y ago
I am beginning to think that perhaps the world's largest advertising corporation should not be trusted with developing the leading web browser.
- blowski 4y ago
  Beginning?
  - a1369209993 4y ago
    Some people are slow on the uptake. Better late than never, though.

gabereiser 4y ago

Yey! Now I can dismiss more notifications and adverts to subscribe to newsletters on every site I visit. Race to z-index:10001 has begun.

pupppet 4y ago

2 minutes after release- where’s the top-top layer option.

dreadlordbone 4y ago

How is this triggered? showModal() on an element? Or is it using this: https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen https://developer.mozilla.org/en-US/docs/Web/API/Element/req... Oh it's a feature of the <dialog> element I guess

jaywalk 4y ago

The blog post keeps mentioning that you "promote" things to the top layer... but how do you do that? I see absolutely nothing in the HTML, CSS or JS of the examples in the post that references anything new. Is this just a new way the browser displays the <dialog> element exclusively? I'm pretty confused.

ijidak 4y ago
Exact same question. I'm glad I'm not alone.
mhink 4y ago
This post is sort of an introduction to a topic that has already existed (in a low-key sort of way) for some time. I'll grant that the article is a little unclear when it comes to getting to the point, but maybe this'll help: The CSS2.1 spec [1] describes how stacking contexts work when painting the browser window. Traditionally, our mechanism for interacting with an element's stacking context has been more or less exclusively to set its z-index. The Fullscreen API spec [2] introduces a new stacking context called the "top layer", which has some unique properties. Most notably, things rendered in the "top layer" are always rendered on top of everything else, regardless of z-index. There is exactly one top layer per document. Parts of this spec also describe operations which can add and remove elements from the top layer. For example, the "fullscreen an element" operation adds it to the document's top layer. [3] This operation is invoked as part of the steps taken when a developer calls `requestFullscreen()` on a DOM element [4]. Now, the `<dialog>` element as specified in the latest HTML spec [5] also interacts with the page's top layer. When you call `.showModal()` on a dialog element, it gets added to the document's top layer. Note that although this is a completely different API, the commonality here is that we're also interacting with the top layer by adding and removing elements from it. The article also references some ongoing discussion [6] on a possible "popup" API which would also interact with the top layer, and which would be used for implementing various controls such as datepickers and dropdown lists. Hope that helps! 1: https://www.w3.org/TR/CSS2/zindex.html https://www.w3.org/TR/CSS2/zindex.html 2: https://fullscreen.spec.whatwg.org/ https://fullscreen.spec.whatwg.org/ 3: https://fullscreen.spec.whatwg.org/#fullscreen-an-element https://fullscreen.spec.whatwg.org/#fullscreen-an-element 4: https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen https://developer.mozilla.org/en-US/docs/Web/API/Element/req... 5: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element https://html.spec.whatwg.org/multipage/interactive-elements.... 6: https://open-ui.org/components/popup.research.explainer/ https://open-ui.org/components/popup.research.explainer/

deleted 4y ago

[deleted]

rafaelturk 4y ago

I'm still trying to grasp the real use of this.. IMO Looks like a bad solution for a problem that wasn't really that big

jraph 4y ago
Obviously a clever act of resistance within the Chrome team, providing a fantastic crap-blocking tool to which crap will be registered willingly. "outside of the document flow": that can't be clearer. It's almost imprudent.
dangrossman 4y ago
Small businesses build their websites by setting up on a platform like Shopify or Squarespace. They use a template and fill in the content. They add functionality to the site, like an email opt-in, a "free shipping if you order over $50" bar at the top of the page, a "contact us" button floating at the bottom, a bunch of social media icons floating on the side... via plug-ins/apps/scripts. They don't ever touch code. All those plug-ins/apps/scripts that provide this functionality to non-technical website owners as a service have no idea what the webpage DOM will look like, how it's coded, what other scripts you're loading on the page. They end up fighting to be on top with z-indexes, and that's how you end up with the website's main navigation being on top of instead of behind a modal dialog like a popup contact form, when the site owner wants it to be behind. This "top layer" means the stuff that isn't part of the page and should always be above the page can really be on top.
- martin_a 4y ago
  Sounds like all that stuff which is now fighting over z-index, "implemented" by people with no clue at all, will be fighting over the top layer soon, when the people with no clue at all start throwing it together...
  - dangrossman 4y ago
    The problem is not these things fighting with each other, but fighting with the webpage design. It's fine if a contact form pops up over an email opt-in form, if the contact form is the more recent thing someone tried to open. It's not fine if the contact form appears behind the website's navigation menu because the website template designer gave the menu too high of a z-index value. Separating these third party overlays from the webpage is the improvement this offers.

jraph 4y ago

Neat. Yes please. The Web becomes usable again just by blocking the top layer.

draw_down 4y ago
Wow, that would be great actually. Right now heuristics to block “please sign up for the newsletter” dialogs is difficult to do. But hopefully in the future we can just selectively allow access to top layer for certain domains.
t0mas88 4y ago
Indeed, this is great. All newsletter popups, cookie popups, "are you sure you want to leave" popups, give us feedback popups... They will all go on the top layer so your adblocker could hide it all at once.
- enbugger 4y ago
  That is the reason why the top layer will not be chosen
- Aeolun 4y ago
  For that reason two dialogs will be opened in the same place. One on the top layer, and one on the layer below it.
recursive 4y ago
Except if that happened, they just wouldn't use it.
- rekoil 4y ago
  They don't care about the 1% of users who will figure this out.

eurasiantiger 4y ago

”z-index: 10000” is a solution employed by people who have no idea what a stacking context is, and, consequently, do not know that one can define their own ”top layer” and have z-indexes inside that work completely separate from the rest of the document. Just set ”position: relative” on an element and it will start a new stacking context, and stack it within the underlying context. It’s like having a card in a card stack be another stack of cards.

cyral 4y ago
I don't blame them when the rules for what creates a stacking context look like this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positio...

HaNdTriX 4y ago

Anyone ranting about this feature, has ever implemented an aria compliant website?

coldtea 4y ago

The "top layer" as a solution to the z-index: 10000 problem, sounds like "this goes to 11" as the solution to having a bigger guitar amp output...

deathanatos 4y ago
I'm a dancer. "Take it from the top" means to start a run through of the current piece from the beginning. Except … we were practicing a section of a piece. And then we started digging into the details on a very specific portion of footwork in the middle of that section. And our choreographer, instead of saying "start from the section", said, "start from the top". And humans being what they are, we all understood, somehow, and the right thing was done without complaint. But then came the need to start from the beginning, at which point she now had to differentiate from what she had been calling (erroneously) "top", and uttered "start from the top top". Some amount of playful joshing followed … and then the term stuck.

zerocrates 4y ago

I'm not saying they haven't earned this kind of treatment necessarily, but it is a little exhausting how much negativity and assumption of bad faith there is here in the commentary on more or less everything Google does. This even is just an explainer of a concept that's implemented by all the vendors, and as far as I know isn't something Google has railroaded.

jiggawatts 4y ago
Google is turning into Microsoft the 90s and 2010s. They're not only monopolistic, they abuse that monopoly power often just because they can, in a careless way that only the obscenely powerful can do. That has soured people's opinion of them. Long gone are the days of "Do no evil" in their mission statement. Now evil is just a casual stepping stone on the path of squeezing out every eyeball-second from the products.. err.. I mean "customers".
dmitriid 4y ago
The only reason they talk about dialog and "how great it is" is because they want to kill a alert/prompt/confirm. https://dev.to/richharris/stay-alert-d https://dev.to/richharris/stay-alert-d Even if they were talking about removing dialog entirely https://twitter.com/voxpelli/status/1423207772498415616 https://twitter.com/voxpelli/status/1423207772498415616 (and none of the issues with dialog have been resolved since) So this top layer bullshit is just a hack to make another hack work. It's not a usable long-term solution, and expect more hacks to deal with this hack in the future.
nailer 4y ago
I mean have you read the Twitter thread defending the web components APIs to a very polite Rich Harris pointing out some rather strange design choices? They’re not nice. They’re an ad company that made good products in the early 2000s.

robocat 4y ago

I always wanted a relative z-index. Example: <year dropdown> over <date picker> over <modal form> over <desktop style app> A complex “desktop style” UI, that shows a modal form over it, and the modal form contains a custom date input component. Click the date input and a custom date entry pop up component is drawn above the modal form to pick the date. On the custom date entry pop up is a year picker, which you click and a custom year dropdown is shown. This was an actual example from my past (I’m not saying it couldn’t have been done better, but this was before there were many better ways to do it). Using absolute z-index required complex coordination between components. The top-layer at least solves the problem of covering the viewport and providing a backdrop (difficult to do reliably, especially 10 years ago). Although I can think of other issues one still needs to solve: disabling inputs and events behind “modal” pop up, disabling iPad background scrolling, must be accessibility, can need multiple layers of popups e.g. loading spinner, problem of tab key handling, et cetera.

marcosdumay 4y ago
I believe CSS has an option that you set to make all z-indexes relative to the element. Making the page hierarchical. It's not exactly what you asked for, but it does void the need to coordinate between too many components.
- fleddr 4y ago
  Yes, set position:relative on a parent element, then set position:absolute with a z-index on the child element. The z-index will be relative to the parent, not to the document.
  - robocat 4y ago
    One of the wonders of CSS (well, browsers) is that you can devote a decade to learning all the various details, and still not know something so fundamental. Thank you. I don’t want to believe I could miss that, but I have been humbled enough times to be doubtful about my beliefs.

bastawhiz 4y ago

Unfortunately, you can't practically use this today because it has only very recently been added to Safari (March 2022). I guess something to look forward to in two to three years.

deleted 4y ago
[deleted]

throwaway1851 4y ago

Vue 3’s <Teleport> component pretty much solves this, as any component can inject a part of its template to anywhere else in the DOM (edit: even outside of the app’s root element). Very nice feature.

ramesh31 4y ago
>Vue 3’s <Teleport> component pretty much solves this, It's so funny to me how transparently contrarian the entire Vue community is. No no, they're totally not React Portals which have existed for 5 years... they're Vue Teleports!
- throwaway1851 4y ago
  I’ve never used React. Was just posting a (potentially) helpful tip. What were you saying again about being contrarian?

PaulDavisThe1st 4y ago

"In 2022 we brought you z-index:10000 and a lot of web UI developers used this to create masterful new models of interactivity within the browser. But we've heard your feedback, and today, in 2023, we bring you the "topper-layer", accessed using z-index:12000. You might be wondering if we're going to stop here. The answer of course, is no. We have a roll-out plan for the next 8 years which will culminate in z-index:100000. Some of you might be asking if our plans for the super-topper-most-mostest-layer are really just reducing this all back to "normal" z-index stacking in the document flow. We'll leave that as a discussion for the forums, while we get back to work."

hoten 4y ago
At the risk of reading too much into a joke, what about the top layer / stack suggests this would later beg for a "topper layer"?
ramesh31 4y ago
You joke, but z-index really is one of the worst decisions in the CSS spec. So. Many. Footguns. There really is almost no case in which a combination of DOM hierarchy and positioning isn't sufficient.
threatripper 4y ago
z-index YYYYMMDD
- matsemann 4y ago
  Actually not that bad. If everyone assumed today's date to be the max value, one could always add something new on top without having to guess whatever value someone else has used, and risk exhausting the range because someone uses the max value.
  - trevvr 4y ago
    But what's today for me is yesterday in New Zealand and if I'm on the West Coast of the US or Hawaii then that can go on for a 'long time'? If I then go +1 then that's just going to end up in the same rat race / breakages.

TheRealPomax 4y ago

This is a joke, right?

woojoo666 4y ago

Z-index is a relic of the imperative styles of the past. Why are we building on top of it, further entrenching us into imperative territory? We should be replacing z-index with something more compatible with modern functional frameworks like React

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 ago
Sure 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 ago
  The 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 ago
    Thanks, though that wasn't quite my question - do you still stack elements within a top layer using z-index?

vladstudio 4y ago

why only one top layer? why not just "layers"? Unpoly has solved this quite elegantly: https://unpoly.com/up.layer https://unpoly.com/up.layer

myfonj 4y ago

Obligatory nitpick: max z-index is obviously not 10_000 but 2_147_483_647. (2^31-1) [1][2] [1] http://web.archive.org/web/20160604042509/http://www.puidokas.com/max-z-index/ http://web.archive.org/web/20160604042509/http://www.puidoka... [2] https://codepen.io/myf/pen/QWmRZEJ?editors=0011 https://codepen.io/myf/pen/QWmRZEJ?editors=0011 (2147483647)

butz 4y ago

z-index: 10000? Amateurs. Hubspot web chat button leaves it in the dust with its z-index: 2147483647. Try to top that.