Comment by robocat | Hacker News Reader

Comment by robocat | Hacker News Reader

Parent Full thread

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.

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.

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.

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.

"Stacking context" creation is one of those concepts that many coders skip while learning as "intuitive enough not to dive deeper", and then stare in disbelief on list of properties that affects this, as pointed out in https://news.ycombinator.com/item?id=32600047 .

Who would have thought that `will-change: mask-image` would have similar effect similar to `position: relative`?

Somebody posted the documentation of stack isolation in another thread.

If you want exactly that, and only that, my conclusion is that the best way is to use `isolation: isolate`.

But if "A over C and B over C", is A over B?

This is a topological sort without a unique solution.

https://en.wikipedia.org/wiki/Topological_sorting#Uniqueness

I imagine it would just pick an order unless you also wrote a rule for A relative to B

Yes, that's the most reasonable thing to do, but an absolute index has much less room for that. Though you then need to allow decimals, so things can be positioned between things that are already adjacent.

The other issue it doesn't have is if you specify "A over B and B over A".

Isn't that the same as giving two elements the same z-index?

I once wrote such a system in JS. For every element, up could specify which elements it needed to cover (complete with a priority rule for cycles). It worked perfectly, but it was slow, because the number of constraints rises quickly if you rely on it too much (and it needs to add all kinds of intermediate constraints to maintain the default visual hierarchy).

Stacking is best controlled by order and nesting in the document structure. If the year dropdown is nested inside the data picker which is nested inside the modal form etc., then you get the desired stacking automatically, without having to set z-index on any of them.

Reply on news.ycombinator.com