The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Sass based Z-index solution Reply To: Sass based Z-index solution



Yup, I should’ve probably explained what this solution is combating.

I often get a bit lost with z-index. I just end up bunging an extra 0 or 1 onto an element that needs to sit above another one.

.site {
 z-index: 1;

.site__menu {
 z-index: 100;

.slide {
 z-index: 1000;

.modal {
 z-index: 417491747;

an so on, after a while it can get a bit confusing. Also you may end up using the same z-index value in a number of places so an extend would probably be best.

So with this mixin you have a number of starting positions.

floor_1 = z-index: 1,
floor_2 = z-index: 50,
floor_3 = z-index: 100,
and so on…

You can either use one of the existing z-index positions or create a new one on the fly.

To create a new one you need tell it which other position should it sit above or below.

As you’ll see from the example, if the resulting z-index value has already been used an extend will be used instead of declaring the value again.

.a1 {
    @include z('floor_2');

.a2 {
    @include z('slide', $above: 'floor_2');

.a3 {
    @include z('slider', $above: 'slide');

.a4 {
    @include z('slide_item', $below: slider);

// output

.a1 {
  z-index: 50;
.a2, .a4 {
  z-index: 55;

.a3 {
  z-index: 60;