html - 页眉和页脚不显示

Question

我正在尝试将位置 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>

但是页眉和页脚不会显示，我不确定我是否必须 float 某些东西或清除它，我一直在 jfiddle 和我自己的服务器上测试这个但什么都没有，图像标签填满了页面，任何人都可以吗告诉我如何解决这个问题。

Answer 1

更改您的 CSS 规则:

#content div{
    position: relative; 
    overflow: scroll;
}

到:

#content {
    position: relative; 
    overflow: scroll;
    height:500px;
}

jsFiddle example

首先，#content div 未应用于任何内容，因为它希望在 #content 中选择不存在的 div。通过删除该规则的 div 部分，您将相对定位应用于内容 div，这允许绝对定位的子项相对于内容容器定位，而不是像以前发生的那样定位整个页面。

然后您可以根据需要指定内容div的高度。