如何在我的内容上方显示标题元素? [英] How can I display a header element above my content?

问题描述

如何在内容 div 上方显示所有标题?(z 轴上的上方")，因此可见的 z 顺序为:

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

1. 内容 1(最底部的元素)
2. 内容 2
3. 标题 1
4. HEADER 2(最顶层元素)

我不能对 DOM 结构进行太多更改:每个标题和 div 都必须分组在一篇文章中.

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>

推荐答案

这是不可能的.文章元素是 position: fixed 所以它们建立自己的 堆叠上下文.

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

您只能将header和div置于文章建立的三维框内.

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.

这篇关于如何在我的内容上方显示标题元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！