Accoutrement 4.0.4

$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.

Requires

$z-index (list)

Used By

@mixin z-index()

@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.

Requires

@function z-index()