Very strange chrome bug with z-index and position:fixed

Question

I've to do a very quick frontend build on a temp site,

There's an odd bug that only appears occasionally in Chrome, and it's the sticky header that is sometimes positioned underneath the content. It has a z-index of 10, none of the content that has positioning is has a higher z-index than this.

The strangest thing is that it only appears occasionally and not everytime, like 5-10% of the time, which makes testing very difficult.

I tried removing the 3d transform on the nav element but the bug still persists. It seems it is some kind of rendering issue but It's critical I find out the cause because we cannot launch with a bug like this for obvious reasons.

link: http://wasabiadmin.se/getillbaka/

I can't really post any code because I am not sure what could be causing it. I don't think it would be helpful to post reams of code in this instance. The elemement with the bug has the class of .navbar located as a descendent of .site-header for quick viewing in Chrome Dev tools.

If anybody can shed any light on this really unusual behaviour I'd very much appreciate it.

Answer 1

This should fix the issue:

As your header is using position: relative; z-index: 10; position: relative; z-index: 10; , give your container the following style:

.page-content {
      position: relative;
      z-index: 9;
}

This will make sure your header is always over your container.

Answer 2

删除父项上的z-index（在您的情况下为标题），然后添加position：relative