为什么 a1 div 需要放在导航标签周围

Question

我有以下有效但不明白为什么第一个 div 需要到位才能让 'home' 显示在正文中

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

因为你的 nav 有 position:fixed 你可以给 anchor 一个 padding-top 来代替 nav 因为 div 你用 position:fixed 包装了 child，固定 height 但有一个 position 默认值（不是 fixed）和 height:50px 是 35px 的 height nav + 15px padding-top 足以显示 "Home" (#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>

为什么 a1 div 需要放在导航标签周围

why does a1 div need to be placed around the nav tag

html

css

nav