Question

我想提供标题下方的网页内容，边距为70px，以便它低于标题。标题有位置：固定;这就是为什么我需要页面内容的margin-top。

但是当我给出保证金最高时：70px;对于页面内容，它也将标题向下移动70px。有什么想法吗？这是代码：

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;
    }
}

Answer 1

我想你忘了给标题top:0;。

.header {
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height: 70px;
  background: #002B03;
}

Answer 2

或者，您可以使用填充而不是边距作为快速解决方案。

margin-top div导致固定标题div向下移动

2 个答案: