CSS定位相對於固定/絕對

道歉，如果我看起來相當「不炫」與CSS。我一直在試圖設置以下...CSS定位相對於固定/絕對

#0 { 
width: 100%; 
height: y; 
border: 1px solid black; 
} 
#a { 
position: fixed; 
float left; 
width: x; 
height: y; 
border: 1px solid black; 
} 
#b { 
position: relative; 
float: left; 
width: x; 
height: y; 
border-right: 1px solid black; 
} 

/* HTML */ 
<div id="0">Some div...</div> 
<div id="a">Another div</div> 
<div id="b">Final div...</div>

出於某種原因，如果我試圖定位＃B＃A以下，＃B將出現ontop的#a的，除非我聲明爲靜態的位置或絕對的，但將需要手動定位頂部/左側屬性，並且這對於所有瀏覽器都不能正確顯示。任何幫助將不勝感激！

現在修好了！（不得不聲明的HTML，身體:(寬度：95％;））感謝所有的建議傢伙！

來源

2011-06-11 user784446

可能您已經瞭解了定位。爲更多檢查這些鏈接http://css-tricks.com/absolute-positioning-inside-relative-positioning/，http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-不同/，http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/ – sandeep 2011-06-11 05:16:46

首先，一對夫婦修復：＃0需要命名爲別的，因爲ID不能以數字開頭。您還缺少：在#a的浮動屬性中。不知道'x'和'y'的高度/寬度有什麼關係 - 我認爲這些只是個例子？

固定和絕對元素超出了文檔流程。也就是說，它們不佔據普通定位元素的空間。

因此，在您的示例中，固定元素將具有相對的一個，因爲它們可以居住在相同的x-y空間中。如果你認爲它是絕對的，top：0;左：0，同樣的事情會發生。

接下來，你有一個作爲一個浮動（幾乎），所以讓我們考慮浮動改變所有的定位。漂浮物在佈置方式上是「特殊」的。它們處於流動狀態，但會盡可能地朝着浮動方向。如果它們太寬而無法與該行上的其他浮動內容相匹配，則會轉到下一行。

你可以做

<style> 
#a 
    { 
    float:left; 
    height:100px; 
    width:150px; 
    background-color:black; 
    } 
    #b 
    { 
    clear:left; 
    height:100px; 
    width:150px; 
    background-color:green; 
    } 
</style> 
<div id='a'>aaaaa aaa</div> 
<div id='b'>bbb bbb</div>

「清除」是指一個元素將出現前被浮動元素下方。 #b將在#a的下一行。你還可以讓#a在右邊有一個大的邊距，或者足夠寬以填充任何容器並且不會爲#b留下空間，以使#b位於#a下方而不是旁邊。

來源

2011-06-11 05:11:53 Cole

ID可以絕對以HTML5中的數字開頭。 – 2011-06-11 05:19:18

@Matt Ball好吧...猜我們最好告訴他宣佈一個文檔類型？ – Cole 2011-06-11 05:39:08

對不一致的道歉，但這不符合我的意圖 - 我試圖用#a創建一個空盒子，在#a旁邊附加了#zero，在#a旁邊顯示了#b，就好像它是連接到框。 – user784446 2011-06-12 10:54:28

我不相信你的width: x和height: y語法是正確的，並且你的#a float屬性缺少冒號。此外，身份證不能以數字開頭，因此#0應該更改爲其他內容。這是使一切正常工作的代碼。你必須擺脫固定和相對的定位。 CSS：

#zero { 
width: 100%; 
border: 1px solid black; 
} 
#a { 
float: left; 
border: 1px solid black; 
} 
#b { 
float: left; 
border-right: 1px solid black; 
}

和HTML：

所有的

<div id="zero">Some div...</div> 
<div id="a">Another div</div> 
<div id="b">Final div...</div>

來源

2011-06-11 05:10:31 Vap0r

感謝您的回覆，但使用的語法只是爲了強調一個例子。無論如何，這不符合我的意圖 - 我試圖用#a創建一個空盒子，在#zero之外附加#b顯示在#a旁邊。 – user784446 2011-06-12 10:53:27

CSS定位相對於固定/絕對

回答

相關問題