如何處理絕對位置的div標籤後的DIV標籤？

我已經設置了一個div命名爲Absolute的標頭，以便它與窗口齊平。如何處理絕對位置的div標籤後的DIV標籤？

我然後有一個不帶位置設置兩者都包含在一個包裝div標籤

我已經設置的內容div標籤以具有100像素從頂部填充，使得內容不會被報頭沖掉內容div標籤。

是否有任何其他方式在絕對定位的標題下移動內容而不需要使用填充或邊距？

<div id="wrapper"> 
    <div id="header"> 
     <div id="indent">content of header</div> 
    </div> 

<div id="content">content of page</div> 

</div>

CSS

#wrapper { 
background-color: #FFF; 
padding-top: 0px; 
padding-right: 5px; 
padding-bottom: 100px; 
padding-left: 5px; 
clear: both;} 

#header { 
position: absolute; 
width: 100%; 
left: 0px; 
top: 0px; 
right: 0px; 
background-color: #FFF;} 

#indent { 
width: 960px; 
margin-right: auto; 
margin-left: auto; 
position: relative;} 
#content { 
clear: both; 
padding-top: 100px;}

來源

2013-11-14 Eamonn

是否有一個特定的原因，你需要擺放一切？如果您取消定位，流量將保持不變。 – SW4

調查z-index屬性 – DarkBee

感謝您的回覆。描述我嘗試做什麼的最佳方式是使用此頁面，頂部堆棧交換和搜索工具跨越窗口的總寬度，並與窗口頂部齊平。之後，頁面內容。 – Eamonn

您可以使用「頂級」屬性：

例如

.absolute { 
    position: absolute; 
    height:20px; 
    width: 20px; 
    background-color: #FF00FF; 
} 
.relative { 
    position: relative; 
    top:20px; 
    height:20px; 
    width: 20px; 
    background-color: green; 
}

見this fiddle

來源

2013-11-14 11:42:01 sHentschel

你將不得不設置一個最高保證金爲內容的div，因爲當你設置頁眉div的位置絕對以下div的會忽略標題div的高度。所以標題div高度屬性也必須是靜態的。

您也可以將html body元素邊距和填充設置爲0px，並從頭標記中移除絕對定位，這也會讓頭div與窗口齊平。

來源

2013-11-14 11:42:26 J2D8T

查看過你的代碼後，下面的代碼會達到同樣的效果，除非你還沒有提到額外的內容。我看到你的使用clear這將有助於讓我們知道是否還有其他可能與您發佈的代碼相互作用的元素。

#wrapper { 
    background-color: #FFF; 
    padding: 0px 5px 100px 5px; 
} 

#header { 
    background-color: red; 
    text-align:center; 
} 

#indent { 
    display:inline-block; 
    text-align:left; 
    /* width : xx */ 
    margin 0 auto; 
}

來源

2013-11-14 11:43:12 SW4

從我能理解，你將要使用relative定位，沒有定位absolute。如果你能讓問題更容易理解，我可能會有更好的答案。

來源

2013-11-14 11:46:52 Doge

作爲一般規則，當你在容器內部浮動內容時，容器會摺疊爲容器的最小高度和寬度，具體取決於CSS主規則以及容器，塊，內聯塊的類型。

在這種情況下，總是在浮動內容之後向一個容器添加一個清除屬性，以便它不會破壞其他內容。

<div id="wrapper"> 
    <div id="header"> 
     <div id="indent">content of header</div> 
    </div> 

    <div class="clear=box"></div> 

    <div id="content">content of page</div> 
</div> 

#wrapper { position:relative; } 
#header { 
    position:absolute; 
    clear:both; /* add this to clear your content */ 
} 
#content { clear:both; /* in case clear:both from above not working */ } 
#clear-box { clear:both; /* a container dedicated to clear contentfloat */ }

有時您可以添加一個專用div來清除之前的內容。絕對保留定位。使用默認元素行爲，除非沒有其他方式，並且您被迫使用position：absolute。

讓我知道如果你的作品:)

來源

2013-11-14 13:37:38

如何處理絕對位置的div標籤後的DIV標籤？

回答

相關問題