Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Positioning Page Content How Z-index Works

Posted by ramseydennis
ramseydennis
4,530 Points

When I implement the z-index code it doesn't work - why is this the case? Thanks -

Hey everyone,

I believe I have implemented the z-index code correctly into my main-header in CSS - however the stacking order has not changed and the figure element still overlaps my header when I scroll - can anyone help me figure out why?

Thanks - 

@media (min-width: 1025px) {

body {
padding-top: 68px;
}

.main-header {
  position:fixed;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  width: 100%;
  top:0;
  z-index:1;
}

    .container {
        width: 80%;
        max-width: 1150px;
    }

    .primary {
        width: 40%;
    }

    .secondary,
    .tertiary {
        width: 30%;
    }

}

3 Answers

ramseydennis
ramseydennis
4,530 Points

It looks like it's working now, perhaps the browser just wasn't being fully responsive prior to -

Thanks for all of your help Sergey and Haytham.

Haytham Badran
Haytham Badran
216 Points
Haytham Badran
Haytham Badran
216 Points

You can make small trick add position:absolute it will help

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

Use higher level of z-index. Try:

z-index: 99999;
ramseydennis
ramseydennis
4,530 Points

Hi Sergey,

Thanks for your quick response. This unfortunately did not work either though. Any other ideas?

Thanks again

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

Try to specify height for .main-header element, and add margin-top for .container which will be equal to height of your header.

https://jsfiddle.net/ya17tyjy/

ramseydennis
ramseydennis
4,530 Points

More than anything, my meta concern is that my code, which I'm trying to replicate from Guil within this video, isn't working in the same manner that it does for Guil within this video - if that makes sense.

I'm sure there are ways around it with information that exists beyond this lesson, but for the purposes of on-track learning, I'm hoping to understand why my specific coding, which I am trying to identically extract from this lesson, isn't having the same effect as Guil's is within this lesson.

I'll attach a snapshot, perhaps that can help -

https://w.trhou.se/odk87shmze

Thanks again -