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

概述我附上了两张图片,第一张显示了我工作的webapp的“桌面”,你看到的一些图标是由< div />组成的开放式对话框.包含一个< iframe />,但是在普通的电脑上一切正常,在iPad上似乎某些元素的z-index存在问题,如第二张图所示. 内部数字的小红色圆形定义如下： .countComunicazioni { position: relative; background: 我附上了两张图片,第一张显示了我工作的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 />里面的标签.

我还注意到,现在问题也出现在谷歌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新渲染策略中？

编辑

看起来我已经能够解决两个图片中显示的问题：从我的网络应用程序生成的所有对话框都放在< div />中.与位置：固定放在身体的最顶部,现在我试图将div移动到页面的最底部,现在布局似乎是正确的.

还有一个问题：打开模式对话框时,应该在对话框和下面的内容之间创建的不透明层实际上是在它上面创建的,请参阅新的屏幕截图.

怎么可以解决这个问题？它需要修改我们的JavaScript还是jquery ui本身的问题？

解决方法刚刚发现自己,Chrome 22处理z-index的方式已被改变.
看看这个很棒的解释,我没有在这里写…

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

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