絕對定位(position:absolute)完美定位布局
一、前言
在《Vue進階（幺肆貳）：CSS-靜態定位，相對定位，絕對定位，固定定位的用法和區別詳解》一文中，講解了CSS常用的幾種定位方式。此博文主要講解如何應用絕對定位實現完美布局，及應用注意事項。
在布局過程中我們經常用到絕對定位，很多初學者在一開始用絕對定位經常會達不到預期的效果，因為它們往往會忽略使用絕對定位的兩個條件。
什么？使用絕對定位還要條件？
當然要啦！代碼又沒有腦子，沒法自己思考應該定位到哪里。為了使用的時候方便，使用絕對定位的時候要滿足兩個條件。
在講這兩個條件的之前，我們要先提一個概念——標準流。
二、標準流
什么是標準流呢？
標準流（normal flow），也被稱為文檔流，是指在不借助任何特殊的css排列規則元素。
2.1 排布規則
浮動和定位（absolute，fixed）會脫離標準流，也就是不受這套規則的約束。
標準流其實就是一個默認的排布規則。下面介紹一下標準流元素的一些排布規則：
標準流中的塊級元素（block）
塊級元素獨占一行,垂直方向上從上往下進行排列；
塊級元素可設寬高；
塊級元素不設寬度的情況下,默認寬度為其父級的100%；
標準流中的行內元素(inline)
行內元素將與其他行內元素從左到右進行排列；
行內元素不可設置寬高,由其內容決定其寬高；
特殊的行內元素
input與img是行內元素，但是可以設置寬高；
標準流中的嵌套規則
塊級元素可以嵌套行內元素，反之不能
ul（無序列表）,ol（有序列表）只能嵌套li，li可以嵌套任何元素。
dl（定義列表）只能嵌套dt（標題），dd（標題解釋）元素。
textarea里只能嵌套文本；
p,h1~h6只能嵌套文本和行內元素；
select（表單控件）只能嵌套option；
a標簽不可以嵌套交互型的標簽；
外邊距合并問題
標準流中上下相鄰的兩個元素的margin-bottom與margin-top會發生重疊情況。
看了上面的一些排布規則，大家是不是就了解什么叫標準流啦？
舉個例子，就拿float來說，沒有浮動的盒子是一個標準流，而浮動的盒子是一個非標準流 ，因為float更改了它默認的排布規則。
而我們要用到的絕對定位，則是對離自己最近的那個非標準流盒子而言的。 （對一個盒子使用了浮動，相對定位，或者絕對定位，那么這個盒子就變成了一個非標準流的盒子了）
好了，接下來就該將使用絕對定位要滿足的兩個條件了。
當我們要使用絕對定位的時候，必須要有兩個條件：
必須給父元素加定位屬性，一般建議使用 position:relative(即：給父元素設為相對定位);
給子元素，加絕對定位position:absolute（給子元素設置為絕對定位）; 同時加方向屬性（top ,left,rigth,bottom）
為什么要滿足這兩個條件呢？
因為絕對定位是以父元素為基準點，進行定位。如果他沒有父元素，或者它的父元素沒有設置position:relative屬性它就會以最近的非標準流盒子為基準點進行定位。
絕對定位會使當前元素脫離文檔流，即變成了非標準流。這是什么意思呢？
其實，當它為標準流的時候，它默認在原位，當它脫離標準流的時候，他就浮動起來了，不再占據原來的位置了。
這時候你要是想定位，如果不給它的父元素設置為相對定位（即讓父元素變為非標準流），或者它沒有父元素，那么它就會以節點的頂部為基準定位，以它為基準定位。
如果我們滿足了這兩個條件，它就會以父元素為基準進行絕對定位。
這樣定位的話，會省去超多麻煩。
三、Demo
下面來看一下具體例子：
這是一個絕對定位了的標題
上面的代碼定義了一個大div，其中包含一個小div，小div中有一段用了絕對定位的話。按照我們的代碼，我們是想要這段文字根據div_test2來定位的，但是運行一下，如圖：
我們可以看到，這段文字根據節點頂部作為基準定位。這是因為它的父元素沒有設置相對定位。
現在給它的父元素設置一下相對定位。
運行結果如下：
Biu~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~pia！
四、拓展閱讀
《Vue進階（幺肆貳）：CSS-靜態定位，相對定位，絕對定位，固定定位的用法和區別詳解》
CSS
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
