$z-index (list)
scss
$z-index: () !default;
A list of named z-index layers, from lowest to highest index. Nest lists (one level only) to establish a new z-index context: The first item will be indexed based on top-level list position, while additional values are indexed by their position in the nested list.
Example
scss
$z-index: (
'main', // 1
'sidebar', // 2
'banner' 'active-nav' 'dropdown', // 3 1 2
'message', // 4
'modal', // 5
);
Used By
@function z-index()
@function z-index()
Return the numeric index of a named layer in your $z-index
variable.
Since 1.0.0
:
No longer type-check output, to allow CSS variables and other non-number values
Parameters & Return
$layer: (string)
The name of a z-index layer in your configuration.
@return (number)
The z-index value associated with the given layer in your configuration.
@mixin z-index()
Output the z-index
property and value of a given layer
in your $z-index
configuration.
Parameters & Output
$layer: (string)
The name of a z-index layer in your configuration.
{CSS output} (code block)
- The z-index property with a value based on your configuration.