css - 带有 Z-index 的 Chrome Css 错误

Question

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

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

该网站的链接是 THIS 并且在中间搜索中有一个下拉 ul 元素，当您单击它时，它位于图片后面。我已经尝试了几个小时所有可能的子 parent 组合、不同的 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>

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 的观点:将来您需要共享代码和工作示例，所以这个问题在未来也很有值(value)。如果您不能分享代码或用最少的代码设置示例，您可以随时在 the chat 中提问。 ，我们很乐意帮助您解决此类“错误”。