CSS 絕對定位

絕對定位比相對定位更靈活

脫標絕對定位的盒子是脫離標準文件流的，所以所有的標準文件流的性質，絕對定位之後都不遵守了。絕對定位後，標籤就不區分行內元素，塊級元素了，不需要display: block;就可以設定寬高了。

span

參考點

如果文件可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對於正常流的某一部分定位。當position取值為absolute時，可以將元素的定位模式設定為絕對定位。

絕對定位的參考點如果用top描述，就是頁面的左上角，而不是瀏覽器的左上角。

如果用bottom描述，那麼就是瀏覽器首屏視窗尺寸，對應的頁面的左下角。

以盒子為參考點

乙個絕對定位的元素，如果父輩元素**現了定位元素，那麼將以父輩這個元素為參考點。

此時p的位置將以頁面的左上角為40px，以瀏覽器當前螢幕為準對齊。

但是一旦給父輩加了相對定位，即：

div

此時將以父輩為參考，位置為父輩盒子中的向下40px，向右40px。

聽最近的已經定位的祖先元素的：

相對定位沒有定位絕對定位，則將以box1為參考，因為box2沒有定位，box1就是最近的父輩元素

相對定位相對定位絕對定位，則將以box2為參考，因為box2是最近的父輩元素

不一定是相對定位，任何定位都可以作為參考點

絕對定位絕對定位，則將以div作為參考點，因為父親定位了。

子絕父絕、子絕父相、子絕父固，都是可以給兒子定位的。但是，工程上子絕、父絕，沒有乙個盒子在標準流裡面了，所以頁面就不穩固，沒有任何實戰用途。工程上，「子絕父相」有意義，父親沒有脫標，兒子脫標在父親的範圍裡面移動。

class
="box1"
>
絕對定位
class
="box2"
>
相對定位
class
="box3"
>
沒有定位
>
p>
絕對定位 將以box2為參考單位
div>
div>
div>

絕對定位的盒子居中

絕對定位之後所有標準流的規則都不適用了，所以margin: 0 auto; 失效。

div

塊級元素不寫寬則自動撐滿，

但是如果絕對定位了：

div

則寬度失效了。

所以寬度可以寫稱width: 100%;

標準文件流中此盒子可以居中：

div

但是如果position: absolute; 則不能通過標準文件流居中。

則通過以下設定可以居中：left 50%父盒子一半的大小，再走自己外邊距負的一半值margin-left

div

CSS 絕對定位

設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。絕對定位的元素的位置相對於最近的已定位祖先元素如果元素...

CSS 絕對定位

設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點...

CSS 絕對定位

設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。css 絕對定位絕對定位使元素的位置與文件流無關，因此...

CSS 絕對定位

CSS 絕對定位

CSS 絕對定位

CSS 絕對定位

相關推薦