我附上了两张图片，第一张显示了我正在使用的 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身体最顶部的 a 中，现在我试图将 div 移动到最底部页面，布局现在看起来是正确的。
还有一个问题：当打开一个模态对话框时，应该在对话框和下面的内容之间创建的不透明层实际上是在它上面创建的，见新的截图。
如何解决这个问题？它需要修改我们的javascript还是jquery ui本身的问题？