今天,经过四个小时的调试,我很难学到了这个规则:
如果父级的z-index值为任何值,则无论您如何更改子级的CSS,父级元素都永远无法覆盖(堆叠在其子级元素之上)
我如何通过逻辑理解这种行为?规范在哪里覆盖?
代码(也在CodePen中):
.container {
width: 600px;
height: 600px;
background-color: salmon;
position: relative;
z-index: 99;
margin-top: 20px;
padding-top: 10px;
}
h1 {
background-color: pink;
position: relative;
z-index: -1;
font-family: monospace;
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<h1>1. I can never be covered by parent if my z-index is positive.</h1>
<h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>Run Code Online (Sandbox Code Playgroud)