使用文章元素时 z-index 无法正常工作

Question

基本上我想在 <article id="accordion"> 之上显示 <article id="characters">。但是正如您所看到的，字符文章不在手风琴文章的顶部，甚至不在手风琴文章的后面。它放在文章下面。

我做错了什么？

#appchap {
  display: block;
  position: relative;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
}

article#accordion {
  display: block;
  position: relative;
  z-index: -1;
}

article#accordion section {
  display: block;
  position: relative;
  height: 25px;
  background-color: blue;
  z-index: -1;
}

article#characters {
  display: block;
  position: relative;
  z-index: 1;
}

article#characters section {
  display: block;
  position: relative;
  height: 25px;
  z-index: 1;
  background-color: red;
}

<div id="appchap">
  <article id="accordion">
    <section>number 1</section>
    <section>number 2</section>
  </article>
  <article id="characters">
    <section>Main characters</section>
  </article>
</div>

Answer 1

如果两个 block 元素是 DOM 中的兄弟姐妹，那么在其他条件相同的情况下——在这种情况下，其他条件都相同——它们将依次呈现。

如果不是这种情况，那么像 <p>Hello</p><p>World</p> 这样简单的事情最终会导致文本重叠。

如果你想让它们重叠，那么你需要做一些显式让它们重叠，例如：

绝对定位它们并赋予它们相同的top值或
给第二个元素负数margin-top

使用文章元素时 z-index 无法正常工作

z-index doesn't work correctly when using article elements

html

css

z-index