相关疑难解决方法(0)

为什么具有z-index值的元素不能覆盖其子级?

今天,经过四个小时的调试,我很难学到了这个规则:

如果父级的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)

在此处输入图片说明

css z-index css-position

11
推荐指数
1
解决办法
1007
查看次数

标签 统计

css ×1

css-position ×1

z-index ×1