Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Get started


  • For designers

    • Start designing
    • Design resources

  • For developers

    • Start developing
    • Using Cloudscape components
    • Global styles
    • Built-in internationalization

  • Testing

    • Introduction to testing
    • Testing frameworks integration
    • Testing classes

  • Development guides

    • Bidirectionality
    • Charts migration
    • Collection hooks package
    • Content security policy (CSP)
    • Responsive development
    • State management
    • Z-index
  1. Cloudscape Design System
    • Get started
    • Development guides: Z-index
    1. Cloudscape Design System
    2. Get started
    3. Development guides: Z-index

    Z-index

    How to understand and control element stacking in Cloudscape.

    Published: December 14, 2021

    On this page

    1. Introduction
    2. Ranges

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Introduction

    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.

    Ranges

    z-index: auto

    If no other z-index is defined, all elements have the default z-index of auto.

    z-index: 800-850

    Sticky elements:

    • Table header

    • Table sticky columns

    • Modal footer

    • App layout notifications slot

    • App layout navigation and tools panels

    • App layout header

    • Split panel

    z-index: 2000

    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

    • Popover content

    z-index: 4999-5000

    Content that should focus the user and block all interaction with other elements:

    • Modal overlay

    • Modal content

    z-index: 7000

    Interactive elements, which ignore its parent stacking context , that should appear above all content, remain visible, and be able to be interacted with:

    Popover content with renderWithPortal set to true
    Copy to clipboard Popover content

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
    • About
    • Connect
    • Privacy 
    • Site terms 
    • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Made with love atAWS