z-index 在 Google Chrome 和 Safari 上无法正常工作。在 Firefox 和 Opera 上还可以答案

【问题标题】：z-index not working as expected on Google Chrome & Safari. Ok on Firefox & Operaz-index 在 Google Chrome 和 Safari 上无法正常工作。在 Firefox 和 Opera 上还可以
【发布时间】：2014-05-22 19:43:55
【问题描述】：

我刚刚读完this great post，但对我没有帮助。

这是我正在建立的网站：http://82.230.210.84。如果您向下调整 Google Chrome 以触发响应式设计，然后向下滚动，您会看到菜单在图像下方传递，而不是像在 Firefox 中那样停留在图像上方。

在代码中，所有z-index属性都带有一个position属性设置为relative/absolute/fixed，显然更高的值（50）设置为菜单。

关于为什么菜单不停留在 WebKit 浏览器上的图像顶部的任何建议？任何潜在的修复/解决方法都是最受欢迎的！

【问题讨论】：

标签： css google-chrome webkit position z-index

【解决方案1】：

我可以通过添加-1 z-index 来修复它。

这样

.formation_domains a.formation_domain > div {
  position: relative;
  width: 200px;
  height: 125px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

希望这会有所帮助。

【讨论】：

这正是我所期待的发布这个，一个很好的旧解决方法。我很惊讶我没有想到它，但这确实削弱了你刚刚给我的好手。非常感谢先生。我真的很感激。
我猜有时候消极会变成积极的事情 ;-) 很高兴它有所帮助。