为什么 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

因为你的nav有position:fixed你可以给anchor一个padding-top，以便在nav之后显示，因为你的div是用position:fixed包裹一个孩子，有一个固定的height，但有一个position默认值(这不是fixed(，height:50px是35px的height nav+15px padding-top足以显示"家"(CC_(第17页(。

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>