Question

我将图像位置固定在div中，代码在gven下面

#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对象的绝对位置。

Answer 2

位置：已修复

产生绝对定位   元素，相对于   浏览器窗口。元素的位置   使用“left”，“top”指定，   “正确”和“底部”属性

换句话说，你不能仅在相对于浏览器窗口的div中“修复”你的图像。

随访：

如果您希望该图像始终位于背景中的同一位置，请使用CSS：

body {background: transparent url(bar.jpg) bottom left no-repeat; 
      background-attachment:fixed}

Answer 3

position: fixed将您的图片相对于浏览器窗口

定位

如果您想将其相对于父div定位，则应使用position: absolute

Answer 4

从我看到的，只需删除位置：从你的img标签样式修复

img {
    float:left;
    padding:50px;
}

我不知道是不是因为你做了一个快速演示来向我们展示，但从不对标签应用样式，最好使用ID或类

如果你想保留距离包含图像的div顶部140像素的边距，请使用：

img {
    margin-top: 140px;
}

如何在滚动时使图像保持在div框内

4 个答案: