Probleme mit Z-Index mit Link

Question

Ich habe zwei div s, eine header und eine section, die section nimmt immer den gesamten Bildschirm und header nur einen kleinen Teil.

Inside my section Ich habe einen Link, wie Sie in der unten stehenden Code sehen:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#header { 
 
    width: 100%; 
 
    background: green; 
 
    height: 50px; 
 
    z-index: 1; 
 
} 
 
#section { 
 
    background: yellow; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow: hidden; 
 
    float: left; 
 
    z-index: -1;

<div id="header">This is my header</div> 
 
<div id="section"> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br><a href="#">Go to the link</a> 
 
</div>

ich z-index in meinem header verwenden müssen, denn wenn ich nicht verwenden, es funktioniert nicht erscheinen, da der section den gesamten Bildschirm abdeckt.

können Sie sehen die DEMO HERE

Bevor ich den Code in JSFiddle mein Problem gestellt war, dass ich in meinem section auf dem Link zu klicken, nicht in der Lage war, aber nach dem Code in JSFiddle setzt die Verbindung funktioniert.

Warum ist das passiert? und wie löst man es auf meiner Website?

Answer 1

Sie brauchen nicht weder z-index und position, die Sie gerade height:100% in #section zusammen mit body, html

oder wenn Sie möchten, können Sie calc() in #section unter Verwendung height:calc(100% - 50px)

verwenden können

body, 
 
html { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 
#header { 
 
    width: 100%; 
 
    background: green; 
 
    height: 50px; 
 
} 
 
#section { 
 
    background: yellow; 
 
    height: 100% /* or - height:calc(100% - 50px) */ 
 
}

<div id="header"> 
 
    This is my header! 
 
</div> 
 

 
<div id="section"> 
 
    <a href="#">Go to the link</a> 
 
</div>

Beachten Sie, dass z-index in #header hatte, die nicht

Answer 2

Es ist wegen der absolute Position des gelben Inhalts. Sie haben top Wert ändern es

#section{ 
    background:yellow; 
    position:absolute; 
    top:50px; 
    bottom:0; 
    left:0; 
    right:0; 
    overflow:hidden; 
    float:left; 
} 

Fiddle

Dann ohne z-index Eigenschaft funktioniert zu machen, #section nach #header im DOM-Baum ist. Das bedeutet, dass der Standardwert z-index auf 2 festgelegt ist und #section einen Standardwert von 1 hat. Dies erklärt, warum es auf der Oberseite #header ist. Sie müssen auch einen Positionswert hinzufügen, zum Beispiel position: relative; zu #header, damit es mit der Änderung der Reihenfolge der Elemente funktioniert.

Fiddle with change of position in the DOM tree

Answer 3

Können Sie einfach Ihre CSS aktualisieren nicht z-index und wenden Sie die Hintergrundfarbe auf dem BODY-Tag zu benutzen? JS Fiddle

*{ 
margin:0; 
padding:0; 
} 
body { 
    background:yellow; 
} 
#header{ 
width:100%; 
background:green; 
height:50px; 
} 
#section{ 
    // Intentionally blank 
}