Question

如何在内容div上方显示所有标题？（在z轴上位于“上方”），以便可见的z顺序为：

内容1（最底端的元素）
内容2
HEADER 1
HEADER 2（最上面的元素）

我不能对DOM结构进行太多更改：每个标头和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

实现此目的的唯一方法是确保所有元素都属于同一个堆栈上下文，因此您需要避免所有在文章元素上创建堆栈上下文的属性，例如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>

Answer 2

这是不可能的。文章元素是position: fixed，因此它们可以建立自己的stacking contexts。

您只能将标题和div 放置在文章建立的三维框中。

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

如何在内容上方显示标题元素？

2 个答案: