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

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

Оберните все в содержащий 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>

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

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

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

У меня такая же проблема в хроме с position:absolute в overflow-y: auto;. Дивы фиксировались в своих позициях во время прокрутки.

И простое решение — использовать float.

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

position:absolute; right:10px;

и я заменил на следующее, и это сработало:

float:right; margin-right:10px;

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

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

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

Допустим, у вас есть два элемента 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/

Ваше здоровье

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