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

Question

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

РЕДАКТИРОВАТЬ (в ответ на вопросы, поставленные ниже): Я позиционирую элемент, потому что мне нужно, чтобы он отображался перед другим элементом.

Answer 1

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

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

Answer 3

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

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

Answer 4

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

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

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

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

position:absolute; right:10px;

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

float:right; margin-right:10px;

Answer 5

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

Answer 6

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

Answer 7

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

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

Приветствия

Answer 8

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