> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cdp.coinbase.com/llms.txt
> Use this file to discover all available pages before exploring further.

# zIndex

```ts theme={null}
const zIndex: {
  select: {
     list: {
        value: "{zIndex.popup}";
     };
  };
  modal: {
     overlay: {
        value: "{zIndex.scrim}";
     };
     dialog: {
        value: "{zIndex.floating}";
     };
  };
  base: {
     value: 0;
     unit: "none";
  };
  raised: {
     value: 1;
     unit: "none";
  };
  popup: {
     value: 200;
     unit: "none";
  };
  scrim: {
     value: 400;
     unit: "none";
  };
  floating: {
     value: 500;
     unit: "none";
  };
};
```

All the z-index tokens.

## Type declaration

| Name                           | Type                                                                                               | Default value         |
| ------------------------------ | -------------------------------------------------------------------------------------------------- | --------------------- |
| <a id="select" /> `select`     | \{ `list`: \{ `value`: `"{zIndex.popup}"`; }; }                                                    | -                     |
| `select.list`                  | \{ `value`: `"{zIndex.popup}"`; }                                                                  | -                     |
| `select.list.value`            | `"{zIndex.popup}"`                                                                                 | `"{zIndex.popup}"`    |
| <a id="modal" /> `modal`       | \{ `overlay`: \{ `value`: `"{zIndex.scrim}"`; }; `dialog`: \{ `value`: `"{zIndex.floating}"`; }; } | -                     |
| `modal.overlay`                | \{ `value`: `"{zIndex.scrim}"`; }                                                                  | -                     |
| `modal.overlay.value`          | `"{zIndex.scrim}"`                                                                                 | `"{zIndex.scrim}"`    |
| `modal.dialog`                 | \{ `value`: `"{zIndex.floating}"`; }                                                               | -                     |
| `modal.dialog.value`           | `"{zIndex.floating}"`                                                                              | `"{zIndex.floating}"` |
| <a id="base" /> `base`         | \{ `value`: `0`; `unit`: `"none"`; }                                                               | -                     |
| `base.value`                   | `0`                                                                                                | `0`                   |
| `base.unit`                    | `"none"`                                                                                           | `"none"`              |
| <a id="raised" /> `raised`     | \{ `value`: `1`; `unit`: `"none"`; }                                                               | -                     |
| `raised.value`                 | `1`                                                                                                | `1`                   |
| `raised.unit`                  | `"none"`                                                                                           | `"none"`              |
| <a id="popup" /> `popup`       | \{ `value`: `200`; `unit`: `"none"`; }                                                             | -                     |
| `popup.value`                  | `200`                                                                                              | `200`                 |
| `popup.unit`                   | `"none"`                                                                                           | `"none"`              |
| <a id="scrim" /> `scrim`       | \{ `value`: `400`; `unit`: `"none"`; }                                                             | -                     |
| `scrim.value`                  | `400`                                                                                              | `400`                 |
| `scrim.unit`                   | `"none"`                                                                                           | `"none"`              |
| <a id="floating" /> `floating` | \{ `value`: `500`; `unit`: `"none"`; }                                                             | -                     |
| `floating.value`               | `500`                                                                                              | `500`                 |
| `floating.unit`                | `"none"`                                                                                           | `"none"`              |