Z-index & Layering

A mixin to apply semantic overlay levels.

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 mixinsds-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

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

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

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