Strategies to avoid z-index problems

May 17, 2021

• Avoid or reduce using z-index as mush as possible.
  • See if the problem can be solved by stacking the elements in a particular order, by leveraging flow-based layout, flex box or grid
  • this approach can sometimes screwup accessibility as when we swap somethings DOM order, we also swap the tab index
    • if not careful this could lead weird focus for keyboard users
    • this can be tested by pressing tab through the page and see if the focus order makes sense
• isolated context
  • The isolation property does precisely 1 thing: creates a stacking context. It’s the lightest-touch way of doing it; unlike z-index, it doesn’t force us to choose a stacking order.
  • our z-index usage will be totally limited to the context and will not mess with rest of the app
• for solving problems related to global ui
  • react portals
  • svelte portal