0

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

Morgan Hassel
  • 23
  • 1
  • 8

1 Answers1

0

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.

Justin Beck
  • 91
  • 3
  • Wow thanks @justin-beck, I actually have no idea what made the difference when I added the same z-index to the ID #top-row as you suggested but it seams to have done the trick! Is it possible that you also know why the menu, .stickyheader, doesn't work correctly sometimes? Sometimes it "latches on" about 30px into the div, if I then update the site the problem sometimes goes away – Morgan Hassel Nov 10 '16 at 22:37
  • I'm not sure what you mean by "latches on". When I scroll up and down the menu bar moves smoothly until it comes to rest at the top or bottom of the page. Nicely done by the way. I like the way the elements move on that page. – Justin Beck Nov 10 '16 at 23:04
  • Hi again @justin-beck! Thank you for the kind words, really! I started with JS 3 days ago but have been designing with CSS since 3 months back! I uploaded a clip of the error I tried to explain, you can see it here: https://drive.google.com/file/d/0BxjugfktClhbUlBOY3RzVE9sT2s/view?usp=sharing – Morgan Hassel Nov 10 '16 at 23:34
  • I see what you're saying now after watching the video. I couldn't get that error to happen on my end. If you have other computers available I would try and see if you could recreate it from other computers or maybe the computer you work from is having some problems. – Justin Beck Nov 11 '16 at 13:57
  • Alright @justin-beck as I said it only happens sometimes, strangely enough, thank you for your help! – Morgan Hassel Nov 11 '16 at 15:31