html - header 上的 Z-index 不起作用

Question

我知道很多人都问过这个问题，而且 z-index 无法处理未定位的元素。然而，我显然在这里遗漏了一些东西。目标是让我的标题最初覆盖大部分页面，然后单击向上移动以显示正文内容。

body {
  margin: 0;
  overflow: hidden;
}

header {
  text-align: center;
  height: 95vh;
  margin: 0;
  position: relative;
  z-index: 9999;
  box-shadow: 0px 5px 10px;
  padding-top: 10px;
}

.leaf {
  height: 50px;
  transform: rotate(135deg);
  position: absolute;
  bottom: 0;
  margin: 0px 0px 20px -25px;
}

.categories {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 12%;
  z-index: 1;
}

.chars {
  border: 1px solid black;
}

<header>
  <h1>Title Placeholder</h1>
  <svg class="leaf" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
            <g>
              <g>
                <path d="M219.388,46.202c-45.273,7.148-86.333,28.057-118.741,60.466l-7.059,7.059C52.895,154.42,30.486,208.523,30.486,266.07
                  c0,52.508,18.666,102.144,52.846,141.346L0,490.747L21.253,512l83.33-83.33c39.202,34.18,88.838,52.846,141.346,52.846
                  c57.548,0,111.65-22.41,152.343-63.102l7.059-7.059c32.409-32.408,53.318-73.469,60.466-118.741L512,0L219.388,46.202z
                   M436.11,287.924c-6.152,38.957-24.144,74.288-52.03,102.176l-7.059,7.059c-68.705,68.705-178.36,72.098-251.119,10.193
                  l239.44-239.439l-21.253-21.253L104.647,386.1c-61.904-72.759-58.512-182.414,10.194-251.119l7.059-7.059
                  c27.888-27.887,63.219-45.879,102.176-52.03l251.79-39.756L436.11,287.924z"/>
              </g>
            </g>
          </svg>
          </header>
          <div class="categories">
            <h2>Characteristics</h2>
            <div class="chars leaves"></div>
            <div class="chars fruit"></div>
            <div class="chars flowers"></div>
            <div class="chars twigs"></div>
            <div class="chars other"></div>
          </div>

Answer 1

如果我正确理解您想要什么，则不存在 z-index 问题。一切都正确定位。

唯一缺少的是页眉具有透明背景。在 CSS 的标题 block 中添加 background-color: white; 使其工作。