iPad中CSS背景固定定位答案

【问题标题】：CSS background fixed positioning in iPadiPad中CSS背景固定定位
【发布时间】：2011-06-23 15:07:34
【问题描述】：

我正在开发一个网络应用程序，我在其中使用 div#details 作为弹出窗口来提供内容。

div 具有以下 CSS 属性

 #detail {
        position: fixed;
        background: #F2F2F2;
        height: 450px;
        z-index: 100;
        top: 125px;
        overflow-y: auto;
        overflow-x: hidden;
        width: 880px;
        padding: 30px;
    }

点击一篇文章会出现这个 div。

当我在计算机的浏览器上单击任何文章时，弹出窗口会出现在正确的位置（始终距离浏览器顶部 125 像素）；

但是当我在 iPad 上查看同一页面时，如果我向下滚动页面并单击一篇文章，弹出窗口会出现在距离文档（不是浏览器）开头 125 像素的位置，就像绝对定位一样。

如何解决此问题我希望弹出窗口停留在可见屏幕中。

更新：

标记就像

<body> 
     <div id="opaque_layer" class="hide"></div> 
     <div class="container_12"> 
     <div id="detail" class=" hide grid_12_custom"></div>
         <!-- lots of other divs -->
</body>

请注意，滚动后，弹出窗口也会向上！

【问题讨论】：

您能否提供屏幕截图或至少提供#detail 所在的html 以及CSS？

标签： css ipad

【解决方案1】：

这似乎是 iPad 的错误。建议使用 javascript 计算位置。 iPhone & iPad position: fixed bottom problem

【讨论】：