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