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

Question

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

我做错了什么？

#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 中的 sibling ，那么其他所有元素都相同——在这种情况下所有其他元素都相同——它们将依次呈现。

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

如果你想让它们重叠，那么你需要做一些明确的来让它们重叠，例如:

• 绝对定位他们并给他们相同的top值(value)或
• 给第二个元素负数margin-top