Simple Sass utility for managing z-indexes with mixins and functions. Keeps track of all your layers, and avoid high z-indexes like 99999.
Installation through bower
bower install z-index-manager --save
You can define you the z-indexes for your layers in a global variable called $z-indexes
.
Example:
$z-indexes: (
header: 10,
modal: 20
);
These values can then be accessed via a function.
header {
z-index: z-index-manager-get( header ); // returns 10
}
Mixins are exposed so you can quickly set z-indexes on specific elements and tell them to be above or below other layers. Example:
header
{
background: red;
left: 0;
position: fixed;
right: 0;
top: 0;
@include z-index-above( footer );
}
You can save for reference on the fly by passing a unique id through as the second parameter. Example:
header
{
@include z-index-above( footer, header ); // header is saved so can be used as a target later on.
}
Mixins available: z-index-above
, z-index-below
, z-index-top
and z-index-bottom
.
By default z-indexes are set by multiples of 5 (with the exception of z-index-top
and z-index-bottom
), but you can override this value by updating the $z-index-buffer
variable.
Examples stored in /examples
directory. Run npm test
in the project route.
Inspired by the frustration that comes with working with the endless plugins that contain stooopidly high z-indexes, and this article on Sitepoint.