# 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. 

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;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-core/sds-tools/layout-system/index-layering.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.