javascript - 如何让图像在滚动时保持在div框内

Question

我将图像位置固定在 div 内，代码如下

#content{
margin-top:100px; 
width:900px; 
color:#009;
border:1px solid red;
overflow:hidden;
display:block;

}
img {
float:left; 
position:fixed;
top:140px;
padding:50px;
}
#text{
 display:block;
border:1px solid green; 
width:500px; 
height:1200px;
float:right; 
overflow:scroll;
}
#footer{
 clear:both;
 width:600px;
 height:300px;
 border:2x solid blue;
 color:#939; 
}

HTML 是

<div id="content" >
<img src="bar.jpg" width="46" height="639" /> 
<div id="text">
ggggggggggggggggggfgdfgdfgdgdfgdgdfgdf
</div>
</div>


<div id="footer">

Footer text
</div>
</body>

现在，当我向下滚动时，图像就会从内容 div 框中出来。 有什么方法可以让即使我滚动图像栏也应该保留在 div 框中。

屏幕截图显示了我的问题 第一个屏幕无需滚动即可正常

alt text http://img293.imageshack.us/img293/8640/bar1k.png

但是当我将文本滚动完整时，它也会覆盖我的页脚

alt text http://img36.imageshack.us/img36/4393/bar2z.png

 I want that image should scroll with the scroll bar but it should not come outside the div box . Is that possible. Basically the div box should be the boundary of the image. THe image should not come out of the div box any time but it should scroll in between that with the length of div box

Answer 1

所以您希望蓝色条保留在红色框中，对吗？

如果是这种情况，您需要将蓝色框的CSS设置为

img {
 position: absolute;
 top:140px;
 left:50px;
}

容器也必须有

#content{
 ...
 position: relative;
}

position:relative 将使蓝色条相对于 #content 而不是相对于 document 对象绝对定位。