我正在尝试将2个或更多图像放置在另一个图像上,因此我一直在测试以下代码
#wrapper div{
width: 100%;
}
#header div{
width: 100%;
clear: both;
}
#content div{
position: relative;
overflow: scroll;
}
#image1
{
width:100%;
top: 0;
z-index:2;
position: absolute;
left: 0;
}
#image2
{ margin-left:3px;
position: absolute;
left: 25%;
top: 150px;
z-index: 3;
}
#footer div{
width: 100%;
float: left;
clear: both;
}
<div id="wrapper">
<div id="header">
<h3>Testing Header</h3>
</div>
<div id="content">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
<div id="footer">
<h3>Testing Foorter</h3>
</div>
</div>
但是页眉和页脚不会显示,我不确定是否必须浮动或清除它,我已经在jfiddle和我自己的服务器中对其进行了测试,但是什么也没有,图像标签会填满页面,有人可以告诉我如何解决这个问题。
最佳答案
更改您的CSS规则:
#content div{
position: relative;
overflow: scroll;
}
至:
#content {
position: relative;
overflow: scroll;
height:500px;
}
jsFiddle example
首先,
#content div
不会应用于任何内容,因为它正在选择#content
中不存在的div。通过删除该规则的div
部分,您可以对content div应用相对定位,从而可以将绝对定位的子级相对于内容容器而不是整个页面相对于先前发生的位置进行定位。然后,您可以根据需要指定内容div的高度。