Question

我知道这个问题很多，并且z-index不适用于没有定位的项目。然而，我在这里明显遗漏了一些东西。我的目标是让我的标题最初覆盖页面的大部分内容，然后单击向上移动以显示正文内容。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果我理解你想要什么，就没有z-index问题。一切都准确无误。

唯一缺少的是标题具有透明背景。将background-color: white;添加到CSS中的标题块可以使其正常工作。

标头上的Z-index不起作用

1 个答案: