Sass based Z-index solution

[magicspon]

Evening all,

Here is a solution I’ve badgered together for managing z-indexs

Take a look (requires sass 3.3.3 and sassy-maps)

http://codepen.io/magicspon/pen/rtKJh

Feedback and improvements more than welcome…

t’anks

[Senff]

I’m failing to understand what problem you’re trying to solve here….and the solution to it. Can you explain what you’re doing (and why)?

[magicspon]

Hello,

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;
}

[nixnerd]

I’ve found that usually, z-index issues are caused by improper markup. Is there sometimes an occasion to manipulate z-indexes? For sure! But I find myself really only altering a few z-indexes on an entire site. So, I don’t know if this would be for me.

[magicspon]

@NIX

I’ve found that usually, z-index issues are caused by improper markup.

Yup! that’s gonna cause more than z-index issues!

essentially it’s just a system to allow you to use named z-index values. rather than having to remember .site__menu is z-index: 10 and .site__dropdown is z-index: 100…

all you need to do is remember the named position.

i’ve been using it on the latest project i’ve been working on and it’s worked out pretty well…

[shaneisme]

I’ve always used a layered approach myself, thinking of the base at 0, then a header above it, menu dropdown above that, and then modal at the tippy top.

Chris made a good article that provides a basis for this line of thought and I’ve since tweaked my variables to be close to this:

https://css-tricks.com/handling-z-index/

[Josh]

Why do you need z-index on every element? Typically z-index is reserved solely when you need to actually layer something. I agree with Nix in that correct markup usually ends up using no z-index whatsoever on a project (only when you actually need to put say 4 different layered elements into one area).

[Author]

Posts