$z-index (list)
scss
$z-index: ();Description
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()
Description
Return the numeric index of a named layer in your $z-index variable.
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.
@error
#{$layer} is not a valid z-index.
@mixin z-index()
Description
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.