带有Z-index的Chrome Css错误

Question

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

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

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

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

谢谢！

来自答案的解决方案：有问题的div元素在它上面有大约10个div元素作为“父母”。他的z-index无法进入前线，因为他的最高父母没有位置：相对，只有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的意见：将来你需要分享代码和一个工作示例，所以这个问题在未来也很有价值。如果您无法共享代码或使用最少量的代码设置示例，您可以随时在the chat中询问它，我们很乐意帮助您解决这些“错误”。

Answer 2

这不是一个错误。事实是，必须在父元素上定义z-index。基本上，如果孩子的z指数高于父母，那么元素应该如何行动呢？

问题在于你的#big-map是父母。

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

z-index: 10000;
position: relative;

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

Answer 3

仅在将z-index添加到标记中时才解决绝对位置和固定位置。

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

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

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