In the body of my web page, I have a fixed header and a div#content element. My original intention was to have the content pushed under the fixed header using the margin-top attribute. However, I noticed that when I applied this style, the header also moved down with the content. To resolve this, I added position: absolute to the content element. Surprisingly, this fixed the issue, although I'm still unsure why. I am currently using Firefox on Ubuntu.
Below is the CSS for the header:
header {
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
background-color: #3F51B5;
font-family: sans-serif;
color: #FFFFFF;
width: 100%;
z-index: 1;
}
}
And here is the CSS for the content:
#content {
position: absolute;
margin-top: 100px;
}
}
You can view the code on CodePen.
If anyone can shed some light on why this worked, I would greatly appreciate it! :)