z-index的不正常呈现在iPad和谷歌Chrome 22(z-index not properl

我附上两张图片，第一显示了我工作的web应用的“桌面”，一些图标，你看到了一个开放的对话<div/>包含<iframe/>但同时在普通PC所有正常工作，在iPad上似乎还有一些元素的z-index的问题，如在第二张照片。

红色的小轮与数内的定义如下：

.countComunicazioni {
    position: relative;
    background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
    height: 35px;
    width: 35px;
    color: #FFF;
    top: -105px;
    left: 120px;
    z-index: 0;
    font-weight: bold;
    display: none;
}
.countComunicazioni p {
    margin-top: -5px;
    padding-top: 10px;
}

标记是一个<div class="countComunicazioni"/>标记和一个<p/>内标签。

我也注意到，现在的问题也出现在谷歌浏览器V22，在红色圆圈中的数字总是在最前面，即使它们具有的z-index == 0和对话具有的z-index> 1000。

按照这个bug报告（ http://code.google.com/p/chromium/issues/detail?id=144518 ），变化似乎是打算，即使我敢打赌，它会打破了很多的布局，不仅我们的。

这个问题是不存在的谷歌浏览器的早期版本，也不是目前在Firefox V15或Internet Explorer V9，这里的一切都呈现问题。

这又如何解决？ 我不是CSS专家，所以我必须承认，我曾尝试一下，如果有的话，那么远，而且也，谁是“正确的”吗？ 是我们的标记不正确，或者根本问题出在哪里谷歌浏览器新的渲染策略？

编辑

看来我已经能够解决这两个图片显示的问题：从我的web应用程序生成的所有对话框都放在里面<div/>与position:fixed放置在身体的最顶端，现在我试着移动DIV到页面最下方，并布局似乎现在是正确的。

还有，虽然多了一个问题：在打开一个模式对话框时，要在对话框下面的内容之间创建一个应该不透明层，上面实际上是创建的，看到新的截图。

这怎么可能解决？ 是否需要修改我们的JavaScript，或者它与jQuery用户界面本身的问题吗？

Answer 1:

才发现自己说的是镀铬22+的方式处理的z-index已经改变。 点击这里，查看这真棒解释，我没有写在这里...

http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements

基本上我明白它的方式是元素具有

position: fixed 

现在用自己的z-index层被计数，所以你必须相应地调整你的页面，以适应。

希望帮助！

文章来源: z-index not properly rendered on iPad and Google Chrome 22