我有一个风格为“div”的{div}:overflow-y: scroll; overflow-x: auto;
我尝试动态地在这个“div”中添加具有绝对或相对位置的图像。在用户尝试滚动“div”内容之前,一切似乎都很好:图像相对于浏览器窗口保持固定位置。这个问题似乎只在IE(7)中,在firefox中一切都很好。
这有什么解决方案吗?
编辑(回答下面提出的问题):我正在定位元素,因为我需要它在另一个元素前显示。
答案 0 :(得分:94)
我不知道它是IE中的错误还是“功能”,但我之前遇到过同样的问题。幸运的是,有一个简单的解决方案。只需将“position:relative
”添加到具有可滚动内容的<div>
。
答案 1 :(得分:10)
将所有内容包装在相对位于页面上的包含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>
答案 2 :(得分:2)
您是否需要为图像设置位置?在没有设置位置的情况下,它在IE7中工作正常。
<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div>
答案 3 :(得分:1)
使用float:left
float:right
或margin
我在position:absolute
中使用overflow-y: auto;
在Chrome中遇到了同样的问题。在滚动时,div正在固定位置。
一个简单的解决方案是使用float。
我的旧代码是 -
position:absolute; right:10px;
我用以下内容替换了它 -
float:right; margin-right:10px;
答案 4 :(得分:0)
如果您希望它能够滚动,则需要使用相对定位。诀窍是在第二个元素上使用负定位。
假设您有两个元素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/
干杯
答案 5 :(得分:0)
你知道吗,将绝对定位的元素包装在一个相对定位的容器元素中可能更容易,我认为应该能够滚动...
答案 6 :(得分:0)
我学到的东西很难:对于IE6 / IE7,它可能需要将图像作为包含DIV中的最后一个DOM元素,以使其在滚动DIV上显示。
答案 7 :(得分:-3)
声明position: absolute;
表示元素将相对于视口的左上角显示。改为使用relative
表示您将left
和top
使用的值添加到img
正常的位置。