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

Question

I have the following which is working but don't understand why the first div needs to be in place in order to get 'home' to display in the body

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>

dippas · Accepted Answer · 2017-05-25T12:57:16.017

Because your nav has position:fixed you can give the anchor a padding-top instead in order to show after the nav because the div you had was wrapping a child with position:fixed, with a fixed height but had a position default (which is not fixed) and height:50px is 35px's height nav + 15px padding-top enough to show the "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>

that fixes one problem but creates another. see what happens when you click the other links. you get 50px of white space now — DCR, May 25 '17 at 12:40
interesting, if i change padding-top:50px to margin-top:0px it works too. — DCR, May 25 '17 at 12:55

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

1 Answers1