标头上的Z索引不起作用

Question

I know this is asked a lot, and that z-index cannot work on items that aren't positioned. Yet, I'm clearly missing something here. The goal is to have my header cover most of the page initially, and on a click move up to reveal the body content.

 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

IF I understand correctly what you want, there is no z-index issue. Everything is correctly positioned.

The only thing missing is that the header has a transparent background. Adding background-color: white; to the header block in the CSS makes it work.