Div具有滚动和具有绝对位置的内容

Question

我有一个风格的“div”： overflow-y: scroll; overflow-x: auto; 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 with margin

我在chrome中遇到了与position:absolute相同的问题position:absolute overflow-y: auto; 。 在滚动时，div正在固定位置。

一个简单的解决方案是使用float。

我的旧代码是 -

position:absolute; right:10px;

我用下面的代替了它并且它工作了 -

float:right; margin-right:10px;

Answer 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是一个很好的资源

有关使用CSS进行DIV定位的精彩教程，请访问：

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

干杯

Answer 6

你知道吗，将绝对定位元素包装在一个相对定位的容器元素中可能更容易，我认为应该能够滚动...

Answer 7

事情我学到了很多东西：对于IE6 / IE7，它可能需要将图像作为包含DIV中的最后一个DOM元素，以使其在滚动DIV上显示。

Answer 8

申报position: absolute; 表示元素将相对于视口的左上角显示。 使用relative代替意味着您用于left和top的值将被添加到img通常的任何位置。