Z-index
Use to stack elements in a certain order on the page.
Description
Sass mixin used to set the z-index property.
The implementation makes use of the get-z-index defined in rules/functions which calculates the z-index of an element depending on the layer and level of depth at which that element lives.
A page can be split into multiple layers of elements that need to stack in a certain order. All the children of a certain layer can also be stacked within the layer they live in. So, each layer present on the page can have multiple depth levels depending on how many stacking children it needs to accomodate.
All these layers can be grouped into a map in the order they need to stack on a page, from the lowest to highest. In case of the get-z-index function the map contains the following layers: content, page-notif(in-page notifications), nav, modal and takeover. Following the logic above, the takeover layer will be the topmost on the page. Each of these layers can have up to 9 levels of depth (from 0 to 9).
Parameters
$layer: the page layer as defined in $_z-layers map;
$depth-level: the level of depth at which the element needs to sit within the layer. optional parameter; if not set, defaults to `null`;
$position: the position of the element (e.g. `absolute`, `relative` etc.). optional parameter; if not set, the position property will not be defined;
Sass Usage
@include z-index(page-notif); // z-index: 20
@include z-index(page-notif, 2); // z-index: 22
@include z-index(page-notif, 2, absolute); // z-index: 22, position: absolute
Usage
Usage example
No examples available.