Question

我正在尝试在另一个上面放置2个或更多图像，所以我一直在测试以下代码

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

然而页眉和页脚不会出现，我不确定我是否必须浮动或清除它，我一直在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的高度。

Answer 2

您可以将标题，内容和页脚称为#footer #header #content。无需在css中指定它们之后的div标记。

编辑JFiddle：

http://jsfiddle.net/50b7qxjs/1/

Answer 3

这是因为

中的z-index

#image1{
    width:100%;
    top: 0;
    z-index:2;
    position: absolute;
    left: 0;
}

<强> Working Demo

使用z-index:-1

更改z-index值

Updated fiddle 符合您的要求。

页眉和页脚没有显示

3 个答案: