带有 z-index 和位置的非常奇怪的 chrome 错误：已修复答案

【问题标题】：Very strange chrome bug with z-index and position:fixed带有 z-index 和位置的非常奇怪的 chrome 错误：已修复
【发布时间】：2015-04-02 17:44:35
【问题描述】：

我必须在临时站点上进行非常快速的前端构建，

有一个奇怪的错误，它只是偶尔出现在 Chrome 中，它是有时位于内容下方的粘性标题。它的 z-index 为 10，具有定位的内容都没有比这更高的 z-index。

最奇怪的是它只是偶尔出现，而不是每次都出现，比如 5-10% 的时间，这使得测试非常困难。

我尝试删除 nav 元素上的 3d 变换，但错误仍然存在。这似乎是某种渲染问题，但找到原因很关键，因为我们无法启动这样的错误，原因很明显。

我不能真正发布任何代码，因为我不确定是什么原因造成的。我认为在这种情况下发布大量代码不会有帮助。有 bug 的元素的 .navbar 类位于 .site-header 的后代，以便在 Chrome 开发工具中快速查看。

如果有人能阐明这种非常不寻常的行为，我将非常感激。

【问题讨论】：

【解决方案1】：

这应该可以解决问题：

由于您的标头使用position: relative; z-index: 10;，请为您的容器提供以下样式：

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

这将确保您的标题始终位于您的容器上方。

【讨论】：

【解决方案2】：

删除父级上的 z-index（在您的情况下为标题）并添加一个 position:relative

【讨论】：