{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 手持菜刀，她持情操 的问题《margin-top div causes fixed header div to move dow》','https://www.manongdao.com/q-1107165.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I want to give the content of my webpage that is underneath the header, a margin-top of 70px, so that it goes below the header. The header has position:fixed; which is why I need the margin-top for the page content.
However when I give the margin-top: 70px; to the page content, it moves the header down 70px as well. Any ideas why? Here is the code:
HTML:
<body>
<div class="header" style="position: fixed; width:100%;">
<a href="http://www.w3schools.com" >
<h5 id="app-name"
class="nav-item clickable white-text medium-text left-text">
THE VEGAN REPOSITORY
</h5>
</a>
<a href="http://www.w3schools.com" >
<h5 (click)="clicked()" id="sign-in-button"
class="nav-item clickable brand-colour-text medium-text right-text with-border">
SIGN UP FREE
</h5>
</a>
<a href="http://www.w3schools.com" >
<h5 class="nav-item clickable white-text medium-text right-text">LOGIN</h5>
</a>
<a href="#home_page_footer" >
<h5 class="nav-item clickable white-text medium-text right-text" >BLOG</h5>
</a>
<a href="#home_page_footer" >
<h5 class="nav-item clickable white-text medium-text right-text" >ABOUT</h5>
</a>
</div>
<div style="margin-bottom: 100px;margin-top:70px;" class="full-size dimmed">
<div style="z-index: -1;">
<video
style="position:fixed;"
autoplay loop muted
poster="assets/images/home_page/polina.jpg"
id="bgvid">
<!--<source src="polina.webm" type="video/webm">-->
<source src="assets/videos/polina.mp4" type="video/mp4">
</video>
</div>
<div id="motto-text" class="vertical-center" >
<h5 class="white-text medium-text">THE VEGAN REPOSITORY</h5>
<h1 id="main-text"
class=" text-center white-text light-text extra-large-text">
FIND VEGAN PRODUCTS NEAR YOU
</h1>
<a id="try-now-button"
class="with-border clickable"
href="#find-vegan-products-page" >
<h5 style="font-size:16px" class=" text-center medium-text">TRY NOW</h5>
</a>
</div>
</div>
CSS:
.header {
height: 70px;
background: #002B03;
}
.full-size {
height: 100%;
background-size: cover;
}
.dimmed:after {
content: " ";
z-index: -1;
display: block;
position: absolute;
height: 300%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .5);
}
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(../assets/images/home_page/polina.jpg) no-repeat;
background-size: cover;
}
/*for ie 9*/
video { display: block; }
@media screen and (max-device-width: 800px) {
html {
background: url(../assets/images/home_page/polina.jpg) #000 no-repeat center center fixed;
}
#bgvid {
display: none;
}
}
I think you forgot to give the header a
top:0;.