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>