Morgan Hassel Morgan Hassel - 22 days ago 7
CSS Question

Fixed div with higher z-index still shows beneath

I've got myself into something I do not quite understand regarding z-index. I've read around a lot about z-index not being as straight forward as one could guess so after trying everything out myself I'll try to specify my problem in hope for a solution!

For me it comes down to 4 items that makes it complicated:

1 row with a background color with

z-index: 0
.

1
fixed
div that follows with scroll with
z-index: 1
.

1 row with a background color with
z-index: 2
(that's suppose to go on top of the
fixed
div).

1
fixed
menu with
z-index: 3
(that's suppose to go on top of everything else).

My problem is that my menu falls beneath the row with
z index: 2
even though it has
z-index: 3
, and because of the
fixed
div with
z-index: 1
I cannot give it a lower value than 2!

The only solution I've found is if I take away any z-index from my row with
z-index: 2
, but then it falls beneath my
fixed
div and the problem repeats itself.

If anyone want to have a look to better understand my problem, here's my work in progress: http://www.johnmorganstudios.se/client-sevn

Answer

Try using

div#top-row {
z-index: 3;

}

I think the problem is the element you're trying to use z-index: 3 on is not at the same level as the row you're using z-index: 2 on or it is conflicting with the z-index of the element above it.

If you look at div#enhance with class .On-top-row where you have the z-index: 2 it is a direct child of your article element.

However, the div with the .stickyheader class is 2 down from the article element.

I see div#top-row also has the .On-top-row class so maybe change that class to something like .most-toppest-row with z-index: 3.

Comments