Transformed elements will not display behind an element with position sticky

Question

I'm not quite sure what I'm missing here. I have a sticky header. All content flows behind it except content that has been transformed.

When scrolling down the page, the transformed 'A' shows on top of the header when it should be behind it.

.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

Added:

.sticky-header {index: 1;}

MDN :"The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one".

See more about 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>