---
description: A mixin to apply semantic overlay levels.
---

# Z-index & Layering

When working with dynamic layouts, it is sometimes necessary to overlay elements over others using the CSS property called `z-index`. This property allows developers to set the correct order of elements at the moment of overlaying them by simply using numeric values.&#x20;

The elements placed on top have the higher numeric values, while the rest of the elements are placed underneath in decreasing numeric order. It is important to keep in mind that every new numeric value introduced in the CSS will be considered a new level.

To keep better track of the elements and avoid creating too many levels, Sipster-Core offers a list of semantic values to use with the mixin`sds-index("values")`. To use it, developers just have to add one of the listed below values as the param.

| semantic values | numeric value |
| --------------- | ------------- |
| below           | -1            |
| default         | 0             |
| app-nav         | 100           |
| toolbar         | 200           |
| modal-overlay   | 1000          |
| modal-container | 1100          |

### Examples

```scss
.navbar{
  position: fixed;
  top: 0;
  left: 0;
  @include sds-index(app-nav);
}

//--------------
// Compiled CSS 
//--------------

.navbar{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
```
