design-system-components icon indicating copy to clipboard operation
design-system-components copied to clipboard

Published 20 hours ago • verified publisher icon govau

Accordion z-index high

Open Xerxes0198 opened this issue 4 years ago • 1 comments

I am experiencing an issue where the very high z-index of the accordion is coming through to elements which are rendered on top of them. For instance, a modal.

I was hoping someone could explain why the z-index was so high.

&:focus { z-index: 100; }

Xerxes0198 avatar Sep 03 '20 00:09 Xerxes0198

It's probably inspired by having a z-index scale. Ie https://material-ui.com/customization/z-index/. By setting the z-index of the Modal component so high, you know that you'll definitely cover all the stuff with z-indexes under that whilst allowing you to have z-indexes of 100+ for stuff you want on top of the Modal. If it wasn't so high, then it'll be easy to forget what the z-index of the Modal was and have things accidentally appear above it.

wibily avatar Jan 18 '21 04:01 wibily