ヘッダーのZ-インデックスが機能しない

Question

これは多くの質問があり、そのZ-インデックスは配置されていないアイテムでは機能しません。しかし、私は明らかにここに何かを欠いている。目標は、私のヘッダーがページのほとんどを最初にカバーするようにし、クリックを移動して本文の内容を明らかにすることです。

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インデックスの問題はありません。すべてが正しく配置されています。

唯一の欠点は、ヘッダーが透明な背景を持つことです。 background-color: white;をCSSのヘッダーブロックに追加すると、それが機能します。