Question

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

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

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

Answer 1

回答第一个问题：

如果从相对元素中删除相对标记，它将消失在绝对元素后面。即使我在相对元素上设置了更高的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%它会扩展到父级的高度;

CSS定位：绝对/相对叠加

1 个答案: