Slide 1
Slide 1 text
1
Let’s end the z-index competition
Yi LI
Slide 2
Slide 2 text
2
~5 years experience of front-end
engineer.
Have been working in Japan for 2
years.
🗾 I hope I can visit all prefectures before
I leave Japan!
Yi LI
Slide 3
Slide 3 text
3
● “Each box has a position in three dimensions. In addition to their
horizontal and vertical positions, boxes lie along a "z-axis" and are
formatted one on top of the other. Z-axis positions are particularly
relevant when boxes overlap visually.” (from w3c css
specification[1])
● Browsers paints HTML elements according to
their order on the document. z-index gives us
control over when an element is painted.
About z-index
Slide 4
Slide 4 text
4
Fun facts about z-index
Source: https://almanac.httparchive.org/en/2019/css#z-index
Slide 5
Slide 5 text
5
Fun facts about z-index
Source: https://psuter.net/2019/07/07/z-index
Most common indices
(10%)
(1%)
Slide 6
Slide 6 text
6
Fun facts about z-index
The largest known z-index
value
Slide 7
Slide 7 text
7
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999999999999
999999999999 !important
The largest known z-index value
Source: https://almanac.httparchive.org/en/2019/css#z-index
Slide 8
Slide 8 text
8
Can z-index solve all layering issue? (demo)
Slide 9
Slide 9 text
9
Stacking context
Stacking Context
Slide 10
Slide 10 text
10
● Within a stacking context, elements are painted together, other
items outside the same stacking context can’t be painted
between them.
● Having an active z-index triggers the creation of a stacking
context.
● Other ways including “overflow: scroll”, “opacity: < 1” (listed in MDN
stacking context)
Stacking context
Slide 11
Slide 11 text
11
ReactDOM.createPortal(child, container)
(or for Vue)
Ways to avoid multiple stacking context layer
ReactDOM.createPortal(
,
document.body,
);
Slide 12
Slide 12 text
12
● position: fixed elements
● Reorder elements of a ui library
But… some cases are unavoidable
Slide 13
Slide 13 text
13
● CSS variable is similar to JS constants. It allows a value to be stored
in one place, then referenced in multiple other places.
● z-index values in our current project: maximum: 2, minimum: -1.
Make z-index more maintainable
--top-z-index: 2; // modal, header...etc.
--library-z-index: 1;
--nonhoverable-z-index: -1;
Slide 14
Slide 14 text
14
Style-lint can help us check if any z-index value is hard-coded.
- stylelint-number-z-index-constraint (constraint z-index value in a
range)
- stylelint-no-z-index (restrict z-index to be allowed values )
- stylelint-z-index-no-number (not allow z-index to be hard-coded
number)
Using CSS variable
Slide 15
Slide 15 text
15
Reference
1. https://almanac.httparchive.org/en/2019/css#z-index
2. https://psuter.net/2019/07/07/z-index
3. https://www.w3.org/TR/CSS21/visuren.html#z-index
4. https://abandonedwig.info/blog/2020/07/03/css-painting-order.ht
ml
5. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positionin
g/Understanding_z_index/The_stacking_context
6. https://reactjs.org/docs/portals.html
7. https://vueschool.io/articles/vuejs-tutorials/portal-a-new-feature-in
-vue-3/
Slide 16
Slide 16 text
16
Thank you for your listening!