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

Question

如何在不使用 CSS 上的 "ID" 选择器的情况下使 div3 & div4 高于 div1 和 div2等级？

.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>

Answer 1

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

All positioned, opacity or transform descendants, in tree order that fall into the following categories: ...

All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.

在你的情况下，Div #2 将创建它自己的堆栈上下文，如 Div #1，并且由于其中 none 是用 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>

一些相关问题：

What has bigger priority: opacity or z-index in browsers?

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

z-index and nested DOM elements (stacked context) overlay

html

css

layout

z-index