Question

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

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

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

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

谢谢！

来自答案的解决方案：有问题的div元素，其上面有大约10个div元素作为＆＃34; parent＆＃34;。他的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中询问，我们很乐意帮助您解决此类问题＆＃34;错误＆＃34;。< / p>

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

带有Z-index的Chrome Css错误

3 个答案: