如何使.left類出現在標題下方，但將標題位置保持固定？

我是新來的CSS和試圖學習定位。我已經設置了以下樣式：如何使.left類出現在標題下方，但將標題位置保持固定？

div{ 
    border-radius: 5px; 
    border: 1px solid black; 
} 

#header{ 
    width: 550px; 
    position: fixed; 
    background-color: #e8e8e8; 
    height: 100px; 
    z-index: 1; 
} 

.left{ 

    float: left; 
    display: inline-block; 
    position: relative; 
    background-color: #000000; 
    height: 300px; 
    width:275px; 
} 

.right{ 
    float: right; 
    background-color: #0000ff; 
    width: 275px; 
    height: 300px; 
} 

#footer{ 
    clear: both; 
    background-color: orange; 
    width: 550px; 
    height: 50px; 
}

下面是HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
    <title></title> 
</head> 
<body> 
    <div id="header"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div id="footer"></div> 
</body> 
</html>

是否有即拍即。左類的頭選項卡的配合固定的定位做出現在非常頂級。如何讓.left類出現在標題下方，但將標題位置固定？

謝謝

來源

2013-05-28 Phil

將位置更改爲固定？ http://jsfiddle.net/3fC5b/1/ –

位置fixed拉含量超出了傳統人流的就像位置absolute一樣。假設你想修復它到頂部，你還需要添加top: 0;，這樣它就知道該粘住哪裏。這裏有一些更新的代碼可以解決你的問題。

樣式：

div { 
    border-radius: 5px; 
    border: 1px solid black; 
} 

#header { 
    width: 550px; 
    position: fixed; 
    top: 0; 
    background-color: #e8e8e8; 
    height: 100px; 
    z-index: 1; 
} 

#content { 
    border: 0; 
    margin-top: 110px; 
} 

#content:after { 
    content: ""; 
    height: 0; 
    clear: both; 
    display: block; 
} 

.left, .right { 
    height: 300px; 
    width: 275px; 
} 

.left { 
    float: left; 
    background-color: #000000; 
} 

.right { 
    float: right; 
    background-color: #0000ff; 
} 

#footer{ 
    background-color: orange; 
    width: 550px; 
    height: 50px; 
}

另外，我建議把你的浮動元素融入到自己的容器，並添加您margin-top到容器中。您還會看到我爲#content div添加了明確的修復程序，因此在頁腳上沒有必要。

<div id="header"></div> 
<div id="content"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 
<div id="footer"></div>

來源

2013-05-28 18:25:58 theJoeBiz

這是一個小提琴：http://jsfiddle.net/zep8Z/1/ – theJoeBiz

被絕對定位的元素從所謂的文檔流中被刪除。其他元素不再關心他們 - 對他們來說，他們不存在。換句話說：你描述的行爲應該是這樣的。

儘管如此，您可以將其他元素沿着頁邊向下推到頁面上。

.left, .right { 
    margin-top: 100px; 
}

來源

2013-05-28 18:03:16 kleinfreund

我沒有任何絕對位置元素？ – Phil

我很抱歉，但實際上沒有任何區別。「position：fixed;'元素同樣適用。 :) – kleinfreund

謝謝。有沒有什麼辦法讓div的行爲像固定的一樣，但不能從工作流中移除？ – Phil

如何使.left類出現在標題下方，但將標題位置保持固定？

回答

相關問題