margin-top div导致固定标题div向下移动 [英] margin-top div causes fixed header div to move down
本文介绍了margin-top div导致固定标题div向下移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想给我的网页的内容在标题下方，一个70px的边距顶部，以便它在标题下面。标题有position：fixed;这就是为什么我需要页首内容的margin-top。
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.
但是当我给margin-top：70px;到页面内容，它也将标题下移70px。任何想法为什么？这是代码：
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认为你忘了给头部一个 top：0; 。
I think you forgot to give the header a top:0;.
.header {
position:fixed;
left:0;
top:0;
width:100%;
height: 70px;
background: #002B03;
}
这篇关于margin-top div导致固定标题div向下移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
