Question

我有一个风格为“div”的{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

我在position:absolute中使用overflow-y: auto;在Chrome中遇到了同样的问题。在滚动时，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正常的位置。

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

8 个答案: