How to understand and control element stacking in Cloudscape.
On this page
Cloudscape uses z-index ranges to control how certain components stack on top of each other. Elements such as dropdown lists and modals should appear layered on top of other content, regardless of where they are located on a page.
If you set a custom z-index for any custom components or elements outside the system, consider these internal z-index ranges and ensure that your content stacks in the expected manner. In general, we recommend that you avoid using z-index unless absolutely necessary, and instead use other CSS properties to control your layout. When setting z-indexes, be aware of the ranges we use in our components. You can find those ranges in the section below.
If no other
z-index is defined, all elements have the default
App layout notifications slot
App layout navigation and tools panels
App layout header
Interactive elements that should appear above all content, remain visible, and be able to be interacted with:
Dropdown (select, button dropdown, multiselect, autosuggest, property filter, date picker, and date range picker) content
Content that should focus the user and block all interaction with other elements: