內容定位

的位置之後的東西，真的讓我困惑按名稱，absolute或relative。我想創建一個簡單的佈局，這裏頭說靜態的，如果事情被添加或刪除更多/更少在的.filter類調整自己，但現在我的.filter類是從頂部開始，而應該是相對的到。內容定位

我在做什麼錯？

https://codepen.io/codearts/pen/GvEoBZ

.header{ 
 
    position:fixed; 
 
    background:black; 
 
    height:60px; 
 
    width:100% 
 
} 
 
.subheader{ 
 
    height:40px; 
 
    background:grey; 
 
    position:absolute; 
 
    top:60px; 
 
    width:100%; 
 
} 
 
.filter{ 
 
    position:absolute; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-12"> 
 
     <div class="header"></div> 
 
     <div class="subheader"> 
 
     This can be either 
 
     </div> 
 
    </div> 
 
    <div class="filter"> 
 
     <div class="col-6"> 
 
      This can be col-1 
 
     </div> 
 
      <div class="col-6"> 
 
     This can be col-2 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-10 Nofel

由於您的子標題和過濾器都位於絕對位置，因此假設您將過濾器的頂部設置爲100px（60 + 40）以設置在子標題下方。 –

這將使他們堅持在一個地方，例如，如果我讓我的副標題文字太大，它不會推倒過濾器，但覆蓋它。 @RaJeshRiJo – Nofel

好吧，那麼你是否要保持標題和副標題固定在頂部？ –

正試圖解決您的問題，不知道這會幫助你的實際情況，對BEL一試ow [fidder] [1]。

你想什麼做的就是把所有三個格成一個單一的容器中，並設置填充機頂爲固定頭部的高度。並保持subheader和過濾器照原樣。不需要定位它們。

[1]: https://jsfiddle.net/rajsnd08/5mra9tsv/2/

來源

2017-08-10 13:20:50

這工作，但仍然想知道'固定'職位如何工作。 – Nofel

這很簡單，無論您將其定位爲固定，它將保持固定在顯示屏上。滾動時不會改變它的位置。這裏通過指定top：0來定位頂部固定的頂部，意味着頭部必須從頂部0px定位。 –

無需.filters和.subheader是在position:absolute。

這是比這更復雜，但在短期，absolute位置讓你從流中刪除元素，並將其放置關於其父母。但要這樣做，它的父母需要在position: relative，但我不認爲你會在這種情況下需要它。

一個簡單的邊距添加到.subheader，它會做的伎倆:)

（實際上爲聯合國約翰內斯的評論）

編輯

在撥弄解決方案：https://jsfiddle.net/derdnjzs/

來源

2017-08-10 12:05:01

如果我remove'.subheading'會留下空間之間有邊距 – Nofel

好了，所以你需要單獨的'位置：從休息fixed'頭。將'.header'放在他自己的包裝中，'.subheader'＆'.filters'放在另一個容器中。其實，從拉傑什小提琴可以工作之一：https://jsfiddle.net/rajsnd08/5mra9tsv/2/ –

這撥弄我只是做了該做的工作： https://jsfiddle.net/derdnjzs/ –

回答

相關問題