Div с прокруткой и содержанием с абсолютными позициями

У меня есть "div" со стилем: overflow-y: scroll; overflow-x: auto; Я пытаюсь динамически добавлять изображение внутри этого "div" с абсолютной или относительной позицией. Все кажется нормально, пока пользователь не попытается прокрутить содержимое "div" : изображение остается в фиксированном положении относительно окна браузера. Эта проблема, кажется, только в IE (7), в firefox все в порядке. Есть ли какие-либо решения для этого?

EDIT (в ответ на вопросы, поднятые ниже): Я позиционирую элемент, потому что мне нужно, чтобы он показывался перед другим элементом.

Ответ 1

Я не знаю, является ли это ошибкой или "функцией" в IE, но раньше я сталкивался с тем же. К счастью, есть легкое исправление. Просто добавьте "position:relative" в <div>, у которого есть прокручиваемое содержимое.

Ответ 2

Оберните все в содержащем div, который расположен относительно на странице:

<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;">
    <br />
    <img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" />
    <br />
    <div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;">
        <br />[scrolling content]<br />
    </div>
    <br />
</div>

Ответ 3

Есть ли определенная причина, по которой вам нужно установить позицию для изображения? Он отлично работает в IE7 без установки позиции.

<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div>

Ответ 4

Попробуйте float:left или float:right с помощью margin

Я получил ту же проблему в chrome с position:absolute в overflow-y: auto;. Дивы фиксировались там, где были прокрутки.

И простое решение использует float.

мой старый код был -

position:absolute; right:10px;

и я заменил его следующим и работал -

float:right; margin-right:10px;

Ответ 5

Вам нужно использовать относительное позиционирование, если вы хотите, чтобы он мог прокручиваться. Хитрость заключается в использовании отрицательного позиционирования для второго элемента.

Скажем, у вас есть два элемента A и B, и вы хотите позиционировать B перед A. Это будет выглядеть примерно так:

<div id="A" style="position:relative; width:300px; height=240px;">Element A</div>

<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div>

В зависимости от содержимого вам может потребоваться добавить дополнительные стили, такие как "display: block;" и т.д. Хорошим ресурсом для них является w3schools.com

Для хорошего учебника по позиционированию DIV с CSS перейдите по ссылке:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Приветствия

Ответ 6

Вы знаете, что может быть проще обернуть абсолютные позиционированные элементы в относительно позиционированном элементе контейнера, я думаю, что он должен иметь возможность прокрутки...

Ответ 7

Вещи, которые я усвоил: для IE6/IE7 может потребоваться, чтобы изображение было последним элементом DOM в содержащем DIV, чтобы заставить его отображаться поверх прокручиваемого DIV.

Ответ 8

Объявление position: absolute; означает, что элемент будет отображаться относительно верхнего левого угла окна вида. Использование relative вместо этого означает, что значения, которые вы используете для left и top, будут добавлены туда, где обычно был img.