固定位置div，显示在以下div的顶部

我有以下小提琴https://jsfiddle.net/0vau6psp/这是复制错误所需的最小代码。我认为它与位置有关：固定但我无法弄清楚。固定位置div，显示在以下div的顶部

该问题导致我的头被直接显示在其上造成无法看到的主要内容的主要内容的顶部，我想显示标题下面的内容。

任何帮助，将不胜感激！下面是我的代码以及供参考：

HTML：

<header class="site-header" > 
    <div class="header-main" id="header-flow"> 
    <div class="container-fluid header-cont-top-nav"> 
     <div class="row"> 
     <div class="col-md-5 text-right hidden-xs hidden-sm"> 
      <ul> 
      <li>Link</li> 
      <li>Link</li> 
      <li>Link</li> 
      </ul> 
     </div> 
     </div> 
    </div><!--/.container--> 
    </div><!--/.header-main--> 
</header> 
    <main class="site-main-content" id="mainscrollcontent"> 
     <p> 
     {{ content_for_layout }} 
     Test 
     Test Content 
     Test Content line 4 
     </p> 
    </main>

CSS：

#header-flow { 
    border-bottom: #73b2b2 3px solid; 
    z-index: 1000; 
    background-color: #fff; 
    position: fixed; 
    width: 100%; 
} 
#header-flow li{ 
display:inline-block; 
} 
.site-main-content { 
    margin-bottom: 0; 
    display:block; 
}

来源

2017-03-28 chris cozzens

您可以添加padding-top或margin-top您.site-主要内容的CSS使其下降

来源

2017-03-28 20:33:50

是的，我知道，但是看起来应该有办法做到这一点，否则，我觉得这只是一个临时的解决办法。标题似乎没有设置高度 –

您正在首先在HTML中设置标题，修正它的位置，然后修改main，它将在下面。

所以你长了这些选项：

停止固定头的位置。。删除此行。
change the order
位置：相对;

来源

2017-03-28 20:45:25

如果你不想使用margin-top:或padding:或风格下一组您fixed页眉下方HTML元素，你可以添加一个空白div来实现这一目标。

.block { 
    height: 100px; // customize 
    width: 100%; 
}

Example。 & Example。

来源

2017-03-28 20:46:22

固定位置div，显示在以下div的顶部

回答

相关问题