固定位置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的頂部

回答

相關問題