Я разрабатываю веб-приложение, в котором для доставки контента я использую 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, если я прокручиваю страницу вниз и нажимаю на статью, всплывающее окно появляется в 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>
Обратите внимание, после прокрутки всплывающее окно тоже увеличивается !!
