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

Question

我附上了两张图片,第一张显示我工作的webapp的"桌面",你看到的一些图标打开的对话框由一个<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专家,所以我必须承认到目前为止我已经尝试了很少的东西......而且,谁在这里"正确"？我们的标记是不正确的,还是问题出在Google Chrome新渲染策略中？

编辑

看来我已经能够解决这两个图片显示的问题:从我的web应用程序生成的所有对话框都放在里面<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图层进行计数,因此您必须根据需要调整页面.

希望有所帮助!