warum muss a1 div um das nav tag gelegt werden

Question

ich habe das folgende was funktioniert, aber verstehe nicht, warum das erste div muss an Ort und Stelle sein, um "nach Hause" zu bekommen, um im Körper anzuzeigen

html,body { 
 
    height: 100%; 
 
    margin:0; 
 
} 
 

 
#a1{ 
 
    height:50px; 
 
} 
 
nav{  
 
    text-align:right; 
 
    position: fixed; 
 
    top: 0; 
 
    background: white; 
 
    width: 100%; 
 
    height:35px; 
 
    padding-top:15px; 
 
    background:black; 
 
    
 
} 
 
a{ 
 
    color:white; 
 
    text-decoration:none; 
 
    margin:5px; 
 
} 
 

 
#section1{ 
 
background-color:blue; 
 
color:white; 
 
} 
 
#section2{ 
 
background-color:green; 
 
color:white; 
 
} 
 
#section3{ 
 
background-color:purple; 
 
color:white; 
 
} 
 
.size{ 
 
width:100%; 
 
height:700px; 
 
} 
 

 
.anchor{ 
 
display: block; 
 
height: 50px; /*same height as header*/ 
 
margin-top:-50px ; /*same height as header*/ 
 
visibility: hidden; 
 
}

<div id='a1'> 
 
<nav> 
 
    <a href ='#home' >home</a> 
 
    <a href ='#about' >about</a> 
 
    <a href ='#contact' >contact</a> 
 
    <pre style='float:right'> </pre> 
 
</nav> 
 
</div> 
 

 

 

 
<span class='anchor' id='home'></span> 
 
<div id='section1' class='size'>Home</div> 
 

 
<span class='anchor' id='about'></span> 
 
<div id='section2' class='size'>about 
 
</div> 
 
<span class='anchor' id='contact'></span> 
 
<div id='section3' class='size'>contact 
 
</div>

Answer 1

weil Ihr navposition:fixed hat, können Sie die anchor eine geben padding-top statt, um nach dem nav zu zeigen, weil die div Sie ein Kind mit position:fixed hatte, wurde Einwickeln , Mit einer festen height hatte aber einen position Standard (was nicht fixed ist) und height:50px ist 35px ‚s heightnav + 15pxpadding-top genug, um den "Home" zu zeigen (#home).

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
nav { 
 
    text-align: right; 
 
    position: fixed; 
 
    top: 0; 
 
    background: white; 
 
    width: 100%; 
 
    height: 35px; 
 
    padding-top: 15px; 
 
    background: black; 
 
} 
 

 
#home { 
 
    padding-top: 50px 
 
} 
 

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    margin: 5px; 
 
} 
 

 
#section1 { 
 
    background-color: blue; 
 
    color: white; 
 
} 
 

 
#section2 { 
 
    background-color: green; 
 
    color: white; 
 
} 
 

 
#section3 { 
 
    background-color: purple; 
 
    color: white; 
 
} 
 

 
.size { 
 
    width: 100%; 
 
    height: 700px; 
 
} 
 

 
.anchor { 
 
    display: block; 
 
    height: 50px; 
 
    /*same height as header*/ 
 
    margin-top: -50px; 
 
    /*same height as header*/ 
 
    visibility: hidden; 
 
}

<nav> 
 
    <a href='#home'>home</a> 
 
    <a href='#about'>about</a> 
 
    <a href='#contact'>contact</a> 
 
    <pre style='float:right'> </pre> 
 
</nav> 
 
<span class='anchor' id='home'></span> 
 
<div id='section1' class='size'>Home</div> 
 

 
<span class='anchor' id='about'></span> 
 
<div id='section2' class='size'>about 
 
</div> 
 
<span class='anchor' id='contact'></span> 
 
<div id='section3' class='size'>contact 
 
</div>