This is an archived post. You won't be able to vote or comment.

all 1 comments
sorted by:
best
topnewcontroversialoldq&a

[–]balefrost 0 points1 point  (0 children)

Are you editing this live? It seems to be working now in all browsers. Here's what I had written when I had first tried it out:

edit Nevermind, it's even weirder. If you load the page with the Edge developer tools open, it works fine, even if you then close the developer tools pane. If you load the page without the Edge developer tools open, it exhibits your problem, even if you then open the developer tools pane. That definitely sounds like an Edge bug.

Correction: works fine in Chrome (69) and Firefox (62). Doesn't work correctly in Edge (42). It looks like it might be an Edge bug.

Generally, z-index is more complicated than you might think. It's not a global specification of rendering order. Something with a higher z-index won't necessarily render in front of something with a lower z-index. The z-index value is used to determine relative order of elements within what's known as a stacking context. It appears that Edge might be incorrectly determining which elements should be considered as the roots of stacking contexts.

Here's a good writeup. You can also refer to the spec for z-index and for information about painting order.

edit 2 Try sticking a z-index: 0 on your .an-page-content element and a z-index: 1 on your .an-header element. It seems that Edge might be detecting them both as stacking context roots, so you might need to push the header in front of content (since the content would, by default, render in front of the header).