ipad - z-index 在 iPad 和 Google Chrome 22 上未正确呈现

Question

我附上了两张图片，第一张显示了我正在使用的 web 应用程序的“桌面”，您看到的一些图标打开了由 <div/> 组成的对话框包含 <iframe/> ，但在普通电脑上一切正常，在 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/>里面的标签。

我还注意到现在这个问题也出现在 Google Chrome V22 中，红色圆圈中的数字总是在顶部，即使它们的 z-index == 0 并且对话框的 z-index > 1000。

根据此错误报告 ( http://code.google.com/p/chromium/issues/detail?id=144518)，更改似乎是有意的，即使我敢打赌它会破坏许多布局，而不仅仅是我们的。

此问题在以前版本的 Google Chrome 中不存在，在 Firefox V15 或 Internet Explorer V9 中也不存在，所有内容都呈现问题。

如何解决这个问题？我不是 CSS 专家，所以我必须承认，到目前为止，我几乎没有尝试过……而且，谁是“正确的”？是我们的标记不正确，还是问题出在谷歌浏览器新的渲染策略上？





编辑

看来我已经能够解决两张图片中显示的问题:从我的网络应用程序生成的所有对话框都放置在 <div/> 中。与 position:fixed放置在正文的最顶部，现在我尝试将 div 移动到页面的最底部，现在布局似乎正确。

还有一个问题:当打开一个模态对话框时，应该在对话框和下面的内容之间创建的不透明层实际上是在它上面创建的，见新的截图。



如何解决这个问题？它需要修改我们的javascript还是jquery ui本身的问题？

Answer 1

刚刚发现自己 chrome 22+ 处理 z-index 的方式已经改变。
在这里查看这个我没有在这里写的很棒的解释......

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

基本上我理解的方式是具有

position: fixed 

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

希望有帮助!