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

Home Forums Other Sass based Z-index solution

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #175331

    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)

    Feedback and improvements more than welcome…



    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)?



    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;

    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.



    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…


    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:


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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Other’ is closed to new topics and replies.