Material UI z-index Elevation System

Material UI z-index System

Material UI (MUI) uses a z-index system based on Material Design's elevation concept. Each component type has a predefined z-index value that reflects its visual hierarchy.

MUI Default z-index Values

// From @mui/material/styles/zIndex
const zIndex = {
  mobileStepper: 1000,
  fab: 1050,
  speedDial: 1050,
  appBar: 1100,
  drawer: 1200,
  modal: 1300,
  snackbar: 1400,
  tooltip: 1500,
};

CSS Custom Properties Equivalent

:root {
  --z-mobile-stepper: 1000;
  --z-fab: 1050;
  --z-speed-dial: 1050;
  --z-app-bar: 1100;
  --z-drawer: 1200;
  --z-modal: 1300;
  --z-snackbar: 1400;
  --z-tooltip: 1500;
}

Comparison with Bootstrap

Component Type	Bootstrap	Material UI
Dropdown	1000	(custom)
AppBar/Fixed	1030	1100
Modal Backdrop	1050	1300
Modal	1055	1300
Popover	1070	(custom)
Tooltip	1080	1500
Toast/Snackbar	1090	1400

Key Differences from Bootstrap

1. Larger gaps: MUI uses 100-point increments (vs Bootstrap's 10-20), giving more room for custom layers.
2. FAB and SpeedDial share 1050: These floating action buttons have the same z-index since they occupy similar visual space.
3. Snackbar below tooltip: In MUI, tooltips (1500) are above snackbars (1400), which makes sense since tooltips are contextual and temporary.
4. Higher overall values: MUI's range (1000-1500) is wider than Bootstrap's (1000-1090).

Customizing MUI z-index

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  zIndex: {
    appBar: 1200,
    drawer: 1100, // swap drawer below appBar
    modal: 1300,
    snackbar: 1400,
    tooltip: 1500,
  },
});