Question

我正在开发一个网络应用，我正在使用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。

当我点击任何文章时，在计算机的浏览器上，弹出窗口显示在正确的位置（始终是浏览器顶部的125px）;

但是当我在iPad上查看同一页面时，如果我向下滚动页面＆amp;点击一篇文章，弹出窗口从文档的开头（不是浏览器）开始出现125px，就像绝对定位一样。

如何解决此问题我希望弹出窗口保持在可见屏幕上。

更新

标记就像

<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>

请注意，滚动后弹出窗口也会上升!! enter image description here

Answer 1

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

CSS背景固定在iPad中定位

1 个答案: