Question

我有以下小提琴https://jsfiddle.net/0vau6psp/这是复制错误所需的最小代码。我假设它与位置有关：修复但我无法弄明白。

问题是导致我的标题直接显示在主要内容的顶部，这导致主要内容无法看到，我希望内容显示在标题下方。

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

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

Answer 1

如果您不想在margin-top:标题下使用padding:或fixed或样式下一组HTML元素，则可以添加一个空白div来实现这一目标。

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

Example。＆安培; Example

Answer 2

您可以将padding-top或margin-top添加到.site-main-content css中以将其删除

Answer 3

您首先在HTML中设置标题，然后修复它的位置，然后是main，它就在下面。

所以你有这些选择：

停止修复标题的位置。。删除这一行。
change the order
位置：相对;

固定位置Div，显示在下面的div之上

3 个答案: