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

Question

我附上了两张图片，第一张是我工作的webapp的“桌面”，你看到的一些图标是由包含<div/>的{​​{1}}打开的对话框，但是在一台普通的电脑都能正常工作，在iPad上似乎有些元素的z-index存在问题，如第二张图所示。

内部带数字的小红色圆圈定义如下：

<iframe/>

标记是.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"/>标记。

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

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

以前版本的Google Chrome中没有此问题，Firefox V15或Internet Explorer V9上也没有此问题，因为这些问题都会出现问题。

如何解决这个问题？我不是CSS专家，所以我必须承认到目前为止我已经尝试了很少的东西......而且，谁在这里“正确”？我们的标记是不正确的，还是问题出现在Google Chrome新渲染策略中？

修改

似乎我已经能够解决两张照片中显示的问题：从我的网络应用程序生成的所有对话框都放在<p/>内，<div/>位于最顶层身体，现在我试图将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图层进行计数，因此您必须根据需要调整页面。

希望有所帮助！