转换后的元素不会显示在位置粘滞的元素后面

Question

我不太确定我在这里遗漏了什么。我有一个粘header。除已转换的内容外，所有内容都在其后流动。

向下滚动页面时，转换后的 'A' 显示在 header 的顶部，而本应位于它的后面。

.sticky-header {
  position:sticky;
  top:0;
  background: red;
  height: 250px;
}

.some-content {
  background:blue;
  height:1000px;
  text-align:center;
}

p {
  color:white;
  font-size: 60px;
}

.transformed {
  transform: rotate(180deg)
}

<div class="sticky-header">
</div>
<div class="some-content">
  <p>A</p>
  <p class="transformed">A</p>
  <p>A</p>
</div>

Link to codepen

Answer 1

已添加：

.sticky-header {index: 1;}

MDN :"z-index CSS 属性设置定位元素及其后代或弹性项目的 z-order。具有较大 z-index 的重叠元素覆盖具有较小的”。

查看更多关于 z-index

.sticky-header {
  position:sticky;
  top:0;
  background: red;
  height: 250px;
  z-index: 1;
}

.some-content {
  background:blue;
  height:1000px;
  text-align:center;
}

p {
  color:white;
  font-size: 60px;
}

.transformed {
  transform: rotate(180deg)
}

<div class="sticky-header">
</div>
<div class="some-content">
  <p>A</p>
  <p class="transformed">A</p>
  <p>A</p>
</div>

转换后的元素不会显示在位置粘滞的元素后面

Transformed elements will not display behind an element with position sticky

html

css

css-position

sticky