Z-index & Layering

Basic provisions for indexing/ordering overlapping content.

This section is primarily relevant to the composition of SDS components and patterns themselves. Individual projects that are using SDS may still require their own custom z-index values outside of what this core package provides. This should be managed via that specific project's styles, NOT at the system level.

When working with dynamic layouts, it is often necessary to overlay elements on top (in front of) other elements. This is commonly referred to as z-index, which comes as its own CSS property. This property allows developers to set the desired order for how elements should overlap.

Elements placed on top of other elements will have the higher z-index than the elements they overlap. It is important to keep in mind that every new z-index value declared in CSS will be considered a new layer.

In an attempt to simplify this concept and avoid accumulating arbitrary or repetitive declarations throughout the system, Sipster provides a few foundational z-index levels.

Index Name	Numeric Layer Value
below	-1
default	0
app-nav	100
toolbar	200
modal-overlay	1000
modal-container	1100

---

Applying Z-index

Applying z-index is fairly straightforward in both design and development.

Design: Figma Library

While z-index is primarily a development concept related to CSS, it remains important for designers to be mindful when it comes to layering elements and how that might impact the user's experience. Most of the available z-index details are already included by default via the SDS Components Figma library, but designers should still pay attention to how layers, groups, and components are organized and presented within Figma design files.

Development: SCSS Index Mixin

To simplify implementation of z-index, Sipster provides a custom mixin: @include sds-index().

This mixin accepts an $index name from the table above and returns the associated z-index value.

@include sds-index($index);

Because this is a custom mixin, it needs to be implemented at the same level as other properties for a CSS selector using @include.

Example:

.myCustomStructure {
  @include sds-index(app-nav);
}

.sds_Modal_Overlay {
  @include sds-index(modal-overlay);
}

.sds_Modal_Container {
  @include sds-index(modal-container);
}

Compiled CSS:

.myCustomStructure {
  z-index: 100;
}

.sds_Modal_Overlay {
  z-index: 1000;
}

.sds_Modal_Container {
  z-index: 1100;
}