如何在我的内容上方显示 header 元素？

Question

如何显示内容 div 之上的所有 header？（'above' 在 z-axis 上）所以可见的 z-order 是：

内容 1（bottom-most 元素）
内容 2
HEADER 1
HEADER 2（top-most 元素）

我不能对 DOM 结构做太多改动：每个 header 和 div 都必须分组在一篇文章中。

此外，这些文章的数量未知，不会只有两篇。

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

这是不可能的。文章元素是 position: fixed 所以它们建立了自己的 stacking contexts.

您只能将页眉和div放置在文章建立的三维框内。

这意味着您不能将一篇文章的内容夹在另一篇文章的不同部分之间。

Answer 2

实现此目的的唯一方法是确保您的所有元素都属于同一个堆叠上下文，因此您需要避免在文章元素上创建堆叠上下文的所有属性，如 transfrom、不透明度、固定位置等：

article.one header {
  background: blue;
  color:#fff;
}
article.two header {
  background: red;
  color:#fff;
  width:200px;
}

article.two {
  margin-top:-115px;
}

header {
  width: 280px;
  height: 20px;
  margin:5px 10px;
  position:relative;
  z-index:1;
 }
article div {
  position:relative;
  z-index:-1;
  background:green;
  height:100px;
  margin-top:-8px;
  color:#fff;
}
article.two div {
 background:pink;
}

<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>

如何在我的内容上方显示 header 元素？

How can I display a header element above my content?

html

css

z-index