Question

我有两个ddf['group_id'] = ddf['record_type'].eq('START').cumsum() ddf.compute() id1 id2 Page_nbr record_type group_id 0 St1 Sc1 3 START 1 1 Sc1 St1 5 ADD 1 2 Sc1 St1 9 OTHER 1 3 Sc2 St2 34 START 2 4 Sc2 St2 45 DURATION 2 5 Sc2 St2 65 END 2 6 Sc3 Sc3 4 START 3元素，分别具有container和一个position: sticky。

其中一个元素的子节点带有z-index: 1。

我希望子节点在视觉上位于两个position: absolute元素的顶部。

这是我必须保留的html结构以及我尝试过的内容：

container

.square {
  height: 100px;
  width: 100px;
  position: absolute;
  background-color: red;
  z-index: 10; /* this doesn't work */
}

.container {
  height: 40px;
  width: 200px;
  position: sticky;
  background-color: blue;
  margin-top: 1rem;
  margin-bottom: 1rem;
  z-index: 1;
}

这是当前外观：

这就是我想要的样子：

但是我想保持<!DOCTYPE html> <html> <body> <div class="container"> <div class="square"></div> </div> <div class="container"></div> </body> </html>元素的html结构和sticky对齐。

Answer 1

sticky元素将创建一个堆栈上下文，因此内部的所有元素都不能相对于此堆栈上下文之外的元素放置。您必须修改第一个容器的z-index，使其高于第二个容器的所有子元素。

.square {
  height: 100px;
  width: 100px;
  position: absolute;
  background-color: red;
   /*z-index: 10; this doesn't work */
}

.container {
  height: 40px;
  width: 200px;
  position: sticky;
  background-color: blue;
  margin-top: 1rem;
  margin-bottom: 1rem;
  z-index: 1;
}
.container:first-child {
 z-index:2;
}

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

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

1 个答案: