Chrome Css Z-index 错误

Question

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

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

该网站的 link 是 THIS 并且在中间搜索中有一个下拉 ul 元素，当您单击它时，它位于图片。我已经尝试了几个小时所有可能的组合 child-parent，不同的 z-indexes，位置，但似乎没有任何东西可以在图片前面显示下拉菜单。

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

谢谢！

答案的解决方案： 出现问题的 div 元素在其上方有大约 10 个 div 元素，如 "parents"。他的z-index无法排在前面，因为他的最高parent没有position:relative，只有z-index，导致所有其他child出现问题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>

Answer 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 中提问，我们很乐意帮助您解决此类“错误”。

Answer 2

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

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

它必须具有高 z-index，并且相对位置：

z-index: 10000;
position: relative;

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

Answer 3

仅在将 z-index 添加到位置 absolute 和 fixed.

的标签时解决

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

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

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

Chrome Css Z-index 错误

Chrome Css bug with Z-index

css

google-chrome

z-index