SemanticZIndex

type SemanticZIndex = Flattened<{
  zIndex: typeof zIndexSemantic;
}>;

• base: Default layer (0)
• raised: Slight elevation (1)
• popup: Emerges from content, like dropdowns (200)
• scrim: Blocks what’s beneath, like modal overlays (400)
• floating: Above blocking layer, like content inside modals (500)

​

Example

const theme: Partial<SemanticZIndex> = {
  "zIndex-scrim": "1000",
  "zIndex-floating": "1001",
};

​

See

• zIndexSemantic for the default token values
• ComponentZIndex for the component z-index values that inherit from SemanticZIndex