z-index和嵌套DOM元素（堆叠上下文）覆盖

Posted 2021-05-06

如何在不使用CSS级别的“ID”选择器的情况下在div1和div2之上创建div3和div4？

.container {
    margin: 50px;
    padding: 20px;
    text-align: center;
    border: 1px dashed #999966;
}

.position {
  height: 120px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 10px;
  opacity: 0.8;
  border: 1px dashed #999966;
  background-color: #ffffcc;
}

.position .position {
  margin-top: 60px;
  margin-left: 100px;
  width: 50%;
}

.relative {
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
 }
 
.fixed {
  position: fixed;
  border: 1px dashed #669966;
  background-color: #e3e3ff;
  align-items: flex-start;
 }
 
.fixed.target-block {
  width: 200px;
  height: 300px;
  top: 130px;
  right: 140px;
  z-index: 999;
 }
 

<div class="container">
  <p>
    DIV: CONTAINER<br>
    position: relative;
  </p>

  <div class="position">
    <p>
      DIV #1<br>
      no position;
    </p>
    <div class="position relative">
      <p>
        DIV #3<br>
        position: relative;<br>
        parent
      </p>
      <div class="position fixed target-block">
        <p>
          DIV #4<br>
          position: fixed;<br>
          child
        </p>
      </div>
    </div>
  </div>
  
  <div class="position">
    <p>
      DIV #2<br>
      no position;
    </p>
  </div>
  
</div>

答案

如果我们参考specification，我们可以读到这个：

8. 所有定位，不透明或变换后代，按树的顺序分为以下几类：... 所有不透明度后代的不透明度小于1，按树顺序，创建一个原子生成的堆叠上下文。

在你的情况下，Div＃2会创建它自己的堆叠上下文，比如Div＃1，因为它们都不是用z-index定位的，所以只需控制它们的子元素就无法达到你想要的效果。

因此，我在这里看到的唯一方法是使其中一个div定位并将z-index应用于它，或者两者都使用不同的z-index定位。目的是避免遵循上面指定的树顺序。

.container {
  margin: 50px;
  padding: 20px;
  text-align: center;
  border: 1px dashed #999966;
}

.position {
  height: 120px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 10px;
  opacity: 0.8;
  border: 1px dashed #999966;
  background-color: #ffffcc;
}

.position .position {
  margin-top: 60px;
  margin-left: 100px;
  width: 50%;
}

.relative {
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
}

.fixed {
  position: fixed;
  border: 1px dashed #669966;
  background-color: #e3e3ff;
  align-items: flex-start;
}

.fixed.target-block {
  width: 200px;
  height: 300px;
  top: 130px;
  right: 140px;
  z-index: 999;
}

<div class="container">
  <p>
    DIV: CONTAINER<br> position: relative;
  </p>

  <div class="position" style="position:relative;z-index:1;">
    <p>
      DIV #1<br> no position;
    </p>
    <div class="position relative">
      <p>
        DIV #3<br> position: relative;<br> parent
      </p>
      <div class="position fixed target-block">
        <p>
          DIV #4<br> position: fixed;<br> child
        </p>
      </div>
    </div>
  </div>

  <div class="position">
    <p>
      DIV #2<br> no position;
    </p>
  </div>

</div>

以上是关于z-index和嵌套DOM元素（堆叠上下文）覆盖的主要内容，如果未能解决你的问题，请参考以下文章

堆叠上下文z-index

堆叠上下文

z-index堆叠规则

z-index详解

z-index详解

z-index详解