Z-Index auf Kopfzeile funktioniert nicht

Ich weiß, dass dies viel gefragt wird, und dass Z-Index nicht auf Positionen, die nicht positioniert sind, arbeiten kann. Doch hier fehlt mir eindeutig etwas. Das Ziel ist es, dass mein Header den größten Teil der Seite anfänglich bedeckt und auf einen Klick nach oben zeigt, um den Body-Inhalt anzuzeigen.Z-Index auf Kopfzeile funktioniert nicht

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>

Quelle

2017-11-08 vortalad

Haben Sie eine Fiddle- oder Arbeits-URL? Was siehst du gerade? – Paul

Ihre ' IiroP

Und Ihr Snippet zeigt keinen Versuch, die Kopfzeile zu ändern. Es ist nur ein Block, der zufällig relativ positioniert ist, aber in genau der gleichen Position, in der er nicht positioniert wurde. Meinst du "Position: sticky" oder so? –

Wenn ich richtig verstehe, was Sie wollen, gibt es keine z-index Problem. Alles ist richtig positioniert.

Das einzige, was fehlt, ist, dass die Kopfzeile einen transparenten Hintergrund hat. Das Hinzufügen von background-color: white; zu dem Headerblock in dem CSS funktioniert es.

Quelle

2017-11-08 18:40:13 delCano

Nun, ja. Das war's. Ich weiß es wirklich zu schätzen, dass Sie darauf hingewiesen haben, was offensichtlich sein sollte. Ich werde jetzt in Scham zurück in mein Büro gehen. – vortalad

Z-Index auf Kopfzeile funktioniert nicht

Antwort

Verwandte Themen