When I click on a Modal Component, it is not on the top level, but is covered by the Menu Section and the Card Component. My page structure: Section and inside a container with a menu (sticky), Grid with Button, HTML and Modal. Additionally a Card with Grid. I use Card to select a different background than in the container. How do I get the Modal component to the top level?
As it’s possible to put a modal anywhere within a page structure, and it’s not always clear what elements draw on top of other elements, having the ability to set an elements layer order (aka z-index in CSS) would be useful to ensure that elements are drawn in the right stacking order. This should also be a property common to all visible elements.
Keeping tracking of which z-index number an element is set to can be a little confusing, but if it were possible to name layers (ie. background, content, modal, etc) and visually arrange them in order (ie. top, modal: 3, content: 2 and bottom, background: 0) that would likely make it much more user friendly.
1 Like
This is a know issue - there are layering issues across multiple components depending on how they are being used.
We did previously have a z-index control on all components, but this was difficult and confusing for users to manage and understand.
We have a ticket and an idea on how we can solve this nicely (in a way that shouldn’t require any user action), we just haven’t gotten to it yet! 