How can I display a header element above my content?

Question

How can I display all headers above the content divs? ('above' on the z-axis) so that the visible z-order is:

1. CONTENT 1 (bottom-most element)
2. CONTENT 2
3. HEADER 1
4. HEADER 2 (top-most element)

I cannot change the DOM structure much: each header and div must be grouped in an article.

Also, there will be an unknown number of these articles, not just two.

article {
  position: fixed;
  opacity: .75;
}

article.one {
  transform: translateY(20px);
  color: blue;
}

article.two {
  transform: translateX(100px);
  color: red;
}

header {
  position: fixed;
  width: 280px;
  height: 100px;
  margin: 10px;
  background-color: currentColor;
}

div {
  background-color: black;
  height: 600px;
  width: 300px;
}

span { color: white; }

<article class="one">

  <header><span>HEADER 1</span></header>

  <div><span>CONTENT 1</span></div>

</article>

<article class="two">

  <header><span>HEADER 2</span></header>

  <div><span>CONTENT 2</span></div>

</article>

Answer 1

This is impossible. The article elements are position: fixed so they establish their own stacking contexts.

You can only position the header and div within the three-dimensional box established by the article.

This means you cannot have the content of one article between different parts of the content of another.