CSS定位：绝对/相对叠加

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 的高度。一直到容器，这就是为什么条在整个屏幕上都是统一的 50 像素的原因。

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% 扩展至父级的高度；