z-index
z-index
z-index는 콘텐츠를 배치할 수 있는 세 번째 축을 제공해 레이아웃을 제어하는 데 도움을 주는 CSS 속성이에요.
출처: 문서
본문
여러 Material UI 컴포넌트가 z-index를 활용하는데, drawer, modal, snackbar, tooltip 등을 제대로 층(layer)으로 쌓을 수 있도록 설계된 기본 z-index 스케일을 사용해요.
z-index 값들은 상대적으로 높고 구체적인 임의의 숫자에서 시작해, 이상적으로는 충돌을 피할 수 있어요:
- mobile stepper: 1000
- fab: 1050
- speed dial: 1050
- app bar: 1100
- drawer: 1200
- modal: 1300
- snackbar: 1400
- tooltip: 1500
이 값들은 언제든 커스터마이즈할 수 있어요.
테마의 zIndex 키 아래에서 찾을 수 있어요.
개별 값을 따로 커스터마이즈하는 것은 권장되지 않아요. 하나를 바꾸게 된다면 아마 모두 바꿔야 할 거예요.