Streaming live at 10am (PST)

Image in front of Fixed Header


#1

I'm having an issue with an image on my page going in front of the fixed nav bar. It's only one image.

Help link: https://webflow.com/design/guideyou?preview=0c9e65e929d8f5930ed46f1cfbd64c47

Thank you for taking the time to read this, I really appreciate any help.


#2

strange, its not doing that to me in your preview:


#3

Yeah, it's really weird, it's the second image that is going in front. On my phone/ipad half the time it goes in front, the other half it goes behind.


#4

ah, the second one...having another look, I gave your fixed "nav" element a z-index of 999 and it seems to correct the issue.

p.s. and the culprit is the default defining of relative positioning on the .logocol element. Setting it to auto also removes this affect but not sure if this will affect anything else. There no harm in the layering of the fixed menu since I assume you'll never want anything covering that up anyway.


#5

I even checked that column and skimmed over that! You also helped me figure out what z-indexing does. Thanks a bunch, I appreciate it.


#6

Glad it helped. Here is a great read on z-index. Many folks don't really understand how it plays out and get confused when an element with a higher z-index value doesn't always override an element with a lower z-index value. It's because of the browsers cascade ordering. Once you read this you'll be top dog on this subject and can rule the quad during the office break time debates =)

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

oh and ps, I think that is a default setting on the columns so nothing that wouldn't have been a bugger for anyone with a fixed nav bar. Personally, I didn't even notice it until I re sized the height of my browser window. Tricky things these interwebs.


#7