Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let’s end the z index competition

Let’s end the z index competition

45477cf77ae1a156e65fbc860078bf59?s=128

LI Yi

May 27, 2021
Tweet

Transcript

  1. 1 Let’s end the z-index competition Yi LI

  2. 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

  3. 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
  4. 4 Fun facts about z-index Source: https://almanac.httparchive.org/en/2019/css#z-index

  5. 5 Fun facts about z-index Source: https://psuter.net/2019/07/07/z-index Most common indices

    (10%) (1%)
  6. 6 Fun facts about z-index The largest known z-index value

  7. 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
  8. 8 Can z-index solve all layering issue? (demo)

  9. 9 Stacking context Stacking Context

  10. 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
  11. 11 ReactDOM.createPortal(child, container) (or <Portal /> for Vue) Ways to

    avoid multiple stacking context layer ReactDOM.createPortal( <Wrapper data-testid="loading-scrim"> <Scrim /> <MerIconLoadingOutline /> </Wrapper>, document.body, );
  12. 12 • position: fixed elements • Reorder elements of a

    ui library But… some cases are unavoidable
  13. 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;
  14. 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
  15. 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/
  16. 16 Thank you for your listening!