---
{
  title: 'Layers',
  description: 'Stacking layers in NVIDIA Elements: predictable elevation order for popovers, dialogs, and overlays.',
  layout: 'docs.11ty.js'
}
---

# {{ title }}

Layers define the position of an element on the z-axis in the UI. Layer types are categories of elements that build up to higher layers as they stack or nest. Read more about the [popover explainer](https://open-ui.org/components/popup.research.explainer).

The layers in order of stacking are the following:

- `canvas` - body, document
- `container` - cards, steps, tabs
- `overlay` - modals, drawers, dropdowns (menus, filters, combobox)
- `popover` - tooltips, toasts, notifications

{% example '@nvidia-elements/themes/index.examples.json' 'Objects' %}

{% example '@nvidia-elements/themes/index.examples.json' 'Layers' '{ "inline": false, "height": "650px" }' %}

## Layer Tokens

### Canvas

{% tokens 'sys-layer-canvas' %}

### Shell

{% tokens 'sys-layer-shell' %}

### Container

{% tokens 'sys-layer-container' %}

### Overlay

{% tokens 'sys-layer-overlay' %}

### Popover

{% tokens 'sys-layer-popover' %}
