<分区>
html - 需要解释 z-index 行为
我的 CSS 代码有两个方 block ，绿色(小，子)和红色(大，父)。我想将小盒子的下半部分隐藏在大盒子下面，这样就看不到重叠。
我的以下代码不起作用，但如果我删除红色框上的 z-index，它就会起作用。
我无法理解这种行为。根据我的理解，无论父级的 z-index 是什么，子级上的任何 -ve z-index 都会将其置于父级之下。 有误吗？
.parent {
background:red;
height: 100px;
width: 100px;
position: absolute;
z-index:1;/*comment this line to make it working*/
}
.child {
height: 10px;
width: 10px;
position:absolute;
background:green;
top: 0%;
left: 50%;
transform: translateY(-50%);
z-index: -1;
}<div class="parent">
<div class="child"></div>
</div>预期结果:
最佳答案
通过给父元素一个它自己的z-index，你建立了一个新的stacking context。 .
这会导致子级的 z-index 被限制在父级内部，而不是 html 元素。
关于html - 需要解释 z-index 行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57452410/