为什么需要在nav标签周围放置a1 div

Question

我有以下工作，但不明白为什么第一个div需要到位才能让'家'显示在身体中

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

由于jack_connect已nav，您可以position:fixed anchor代替padding-top，以便在nav之后展示，因为div您使用position:fixed包裹了一个固定height但position默认值（不是fixed）且height:50px为{{1}的孩子{}} 35px + height nav足以显示＆＃34; Home＆＃34; （15px）。

＆＃13;

＆＃13;

padding-top

＆＃13;

#home

＆＃13;

＆＃13;

＆＃13;