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

Question

我不太确定我在这里缺少什么。 我有一个粘性标题。除已转换的内容外，所有内容都在其后面流动。

向下滚动页面时，转换后的“A”会显示在标题的顶部，而它应该在它的后面。

.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 顺序。具有较大 z-index 的重叠元素覆盖具有较小 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>