Z-index 的 Chrome Css 错误答案

【问题标题】：Chrome Css bug with Z-indexZ-index 的 Chrome Css 错误
【发布时间】：2015-11-11 21:20:40
【问题描述】：

我在 Chrome 上遇到了一个奇怪的“错误”，其中 z-index 没有像在其他所有浏览器（包括 IE）中一样正确显示。

我已经阅读了所有与之相关的问题，几乎每个人在他们的问题中都缺少位置或溢出。

网站的链接是THIS，在搜索中间有一个下拉的ul元素，当你点击它时，它就在图片的后面。我已经尝试了几个小时所有可能的子父级组合、不同的 z 索引、位置，但似乎没有任何东西可以让下拉菜单出现在图片前面。

如果有人能指出我正确的方向或提供样本来帮助我，我将不胜感激。

谢谢！

来自答案的解决方案： 出现问题的 div 元素上方有大约 10 个 div 元素作为“父母”。他的 z-index 无法排在前面，因为他的最高父级没有 position:relative，只有 z-index 导致它下面的所有其他子 div 出现问题。

这是一个例子：

<div>      <---- had only z-index, was missing position:relative
  <div>
    <div>
       <div>   <---- this div with z-index could not get in front because of the first one
       </div>
    </div>
  </div>
</div>

【问题讨论】：

你应该分享代码，一旦链接的网站被修复，问题就没有意义了

标签： css google-chrome z-index

【解决方案1】：

你必须添加

z-index: 1000; /* or whatever value works*/
position: relative;

到您的#big-map。这将解决它。您忘记在该 div 中添加 position，这会导致无法应用 z-index。

#big-map 的 CSS 应该如下所示：

#big-map {
  width: 100%;
  height: auto;
  /* background-color: rgb(229, 227, 223); */
  /* background-color: #E0E0E0; */
  -webkit-transform: translateZ(0);
  display: block;
  z-index: 1000;
  position: relative;
}

我同意 Toni Leigh 的观点：将来您需要共享代码和一个工作示例，所以这个问题在未来也很有价值。如果您无法共享代码或使用最少的代码设置示例，您可以随时在the chat 中询问，我们很乐意帮助您解决此类“错误”。

【讨论】：

非常感谢！出于某种原因，我有评论加上我没有检查最高的“父级”，只有 div 上方的几个 5-10，所以我认为这是一个错误，因为它适用于其他浏览器。再次非常感谢，它现在可以工作了，我会在问题中分享代码。

【解决方案2】：

这不是错误。事实上，z-index 也必须在父元素上定义。基本上，如果子元素的 z-index 高于父元素，那么元素应该如何操作？

问题出在您的 #big-map 上，它是父级。

它必须具有较高的 z-index 和相对位置：

z-index: 10000;
position: relative;

将其添加到您的 #big-map 即可解决。

【讨论】：

【解决方案3】：

仅在将 z-index 添加到位置 absolute 和 fixed 的标记时解决。

<div style="z-index:110">

无论CSS中的值有多高，chrome bug都会将其转换为最大17。

z-index:99999999999999999999999999999999;// translates into z-index:17

【讨论】：