Question

我发现了如何处理两个z-index sticky元素（此处为How to control z-index of a child of a sticky element）的parent

但是想知道一种解决n parent元素的一般情况的方法。

.square {
  height: 100px;
  width: 100px;
  position: absolute;
  background-color: red;
}

.container {
  height: 40px;
  width: 200px;
  position: sticky;
  background-color: blue;
  margin-top: 1rem;
  margin-bottom: 1rem;
  z-index: 1;
}

/* this is not a general case */
.container:first-child {
  z-index:2;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container">
      <div class="square"></div>
    </div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
  </body>
</html>

我希望child元素具有更高的z-index并出现在所有parent元素的顶部。

据我了解，当存在css时，我们需要将特定的parent应用于child元素，我一直在努力寻找解决方案

如何控制子n粘性元素的z-index

0 个答案: