CSS定位:绝对/相对叠加

时间:2015-02-18 12:18:59

标签: html css css3

我创建了以下内容来说明我的问题。

#container{
    background-color:white;
    position:relative;
}
#absolute{
    position:absolute;
    height:100%;
    width:100%;
    background-color:black;
}

#relative{
    position:relative;
    background-color:blue;
    width:200px;
}

#content{
    background-color:green;
    height:50px;
    width:50px;
}
<div id="container">
	<div id="absolute"></div>
	<div id="relative">
		<div id="content"></div>
	</div>
</div>

所以我理解以下内容: 1)内容div的大小为50px,因此包含的div(相对)也具有50px的高度。一直到容器,这就是整个屏幕上条形均匀50px的原因。

2)如果我从容器中删除相对标签,那么绝对div内容将填满屏幕,尽管相对div仍位于前面。这是因为绝对定位元素现在绑定到HTML元素而不是容器,因此不受容器高度的限制。

我不明白的是: 1)如果我从相对元素中删除相对标记,它将消失在绝对元素后面。即使我在相对元素上设置了更高的z-index,它也没有显示出来。

#container{
    position:relative;
}

#absolute{
    position:absolute;
    height:90%;
    width:100%;
    background-color:black;
    z-index:1;
}
#relative{
    //position:relative;
    background-color:blue;
    width:200px;
    z-index:2;
    color:white;
}

#content{
    background-color:green;
    height:50px;
    width:50px;
}
<div id="container">
	<div id="absolute"></div>
	<div id="relative">
		<div id="content">Test</div>
	</div>
</div>

2)绝对元素高50px,没有内容,因为100%,但如果我给它内容,即使内容溢出,它仍保持50px。

#container{
    background-color:white;
    position:relative;
}
#absolute{
    position:absolute;
    height:100%;
    width:100%;
    background-color:black;
    color:white;
    z-index:2;
}

#relative{
    position:relative;
    background-color:blue;
    width:200px;
}

#content{
    background-color:green;
    height:50px;
    width:50px;
}
<div id="container">
	<div id="absolute">
        Test<br/>Test<br/>Test<br/>Test
	</div>
	<div id="relative">
		<div id="content"></div>
	</div>
</div>

任何人都可以解释一下允许这些元素以这种方式运行的规则。非常感谢。

1 个答案:

答案 0 :(得分:2)

回答第一个问题:

  

如果从相对元素中删除相对标记,它将消失在绝对元素后面。即使我在相对元素上设置了更高的z-index,它也没有显示出来。

这是因为默认位置为position:static,这意味着包含所有定位说明,包括z-index

在这种情况下,如果您将#absolute设置为z-index负值,它将位于较低层:

#container{
    position:relative;
}

#absolute{
    position:absolute;
    height:90%;
    width:100%;
    background-color:black;
    z-index:-11;
}
#relative{
    //position:relative;
    background-color:blue;
    width:200px;
    z-index:2;
    color:white;
}

#content{
    background-color:green;
    height:50px;
    width:50px;
}
<div id="container">
	<div id="absolute"></div>
	<div id="relative">
		<div id="content">Test</div>
	</div>
</div>


关于问题2:

height:100%它会扩展到父级的高度;