寫在前面

作為一個(gè)前端初學(xué)者，最近研究float和position，感覺好像發(fā)現(xiàn)了新大陸，之前對(duì)float做了一次總結(jié)，現(xiàn)在再給position做一個(gè)總結(jié)。因?yàn)?code>float和position:absolute、position:fixed都會(huì)使元素脫離文檔流，濫用也許會(huì)導(dǎo)致一些未知的效果。特別對(duì)于初學(xué)者來說，養(yǎng)成習(xí)慣尤為重要，有時(shí)候遇到不能理解的事情，覺得隨手一個(gè)定位肯定能解決，但是又怕會(huì)有什么后續(xù)影響而不敢使用,畏手畏腳。所以這里稍微進(jìn)行了總結(jié)，如有漏缺，望讀者指出。

什么是定位（position）？

定義和用法

position 屬性規(guī)定元素的定位類型。

可能的值

其中，position:static是默認(rèn)值，position:inherit屬性用的比較少也暫且不提，這里主要說一下position:relative、position:absolute和position:fixed三個(gè)屬性。

相對(duì)定位（position:relative）

給元素設(shè)置了相對(duì)定位后會(huì)激活四個(gè)屬性：

1. left
2. right
3. top
4. bottom

這四個(gè)屬性在未激活時(shí)也可以設(shè)置，但是沒有任何效果。

給予了相對(duì)定位的元素不會(huì)脫離文檔流，元素會(huì)帶有自己本身的性質(zhì)，在未設(shè)置left、right、top、 bottom屬性時(shí)對(duì)元素本身沒有任何影響。在文本流中，任何元素都被限制了自己本身的位置。而我們可以通過 CSS 去改變?cè)乇旧淼奈恢?，可以通過 margin或者float來給元素實(shí)現(xiàn)位移，但那不算是真正的位移。真正的位移則是通過定義四元素用來控制元素相對(duì)于自己本身位置的偏移量。

實(shí)驗(yàn)代碼如下：
HTML

    <div class="div_1 div_common"></div>
    <div class="div_2 div_common"></div>
    <div class="div_3 div_common"></div>

CSS

        .div_common{
            width: 100px;
            height: 100px;
        }
        .div_1{
            background: red;
        }
        .div_2{
            background: pink;
            position: relative;
            top: 10px;
            left: 10px;
        }
        .div_3{
            background: blue;
        }

效果圖：

效果圖

可以看見，給予了相對(duì)定位的元素，并沒有影響它周圍的元素，因?yàn)樵乇旧聿⑽疵撾x文檔流，所以元素本身的位置得以保留。需要注意的是，哪怕給予位移的值過大，看似讓元素脫離了文檔流，其實(shí)元素依然在文檔流的中，依然留在于原來的位置，這樣會(huì)在原位出現(xiàn)一片空白。定位的原點(diǎn)會(huì)以塊元素左上的原點(diǎn)進(jìn)行定位，所有的位移計(jì)算都將以這個(gè)點(diǎn)作為基礎(chǔ)來進(jìn)行元素的推動(dòng)。

絕對(duì)定位（position：absolute）

對(duì)象會(huì)從文檔流中脫離，不但會(huì)激活left、right、top、 bottom四個(gè)屬性以外，還會(huì)激活z-index屬性，可以通過z-index設(shè)置元素的層級(jí)（默認(rèn)層級(jí)為0）。

注意點(diǎn)：

• 絕對(duì)定位會(huì)選取其最近一個(gè)設(shè)有定位的父級(jí)對(duì)象進(jìn)行絕對(duì)定位，如果對(duì)象的父級(jí)沒有設(shè)置定位屬性，position:absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位。
• 絕對(duì)定位一般配合相對(duì)定位一起使用。因?yàn)榉直媛驶虼翱诖笮∫坏└淖?，絕對(duì)定位的元素就有可能會(huì)移動(dòng)位置影響設(shè)計(jì)效果，畢竟開發(fā)者無法確定所有人的分辨率都和開發(fā)時(shí)制作頁(yè)面使用的分辨率是一樣的。
• 一般情況為了消除絕對(duì)定位帶來的影響，都會(huì)給父級(jí)元素設(shè)置一個(gè)相對(duì)定位（relative），但是注意，是給父級(jí)設(shè)置，雖然說給上上級(jí)或者上上上級(jí)設(shè)置也可以，但是可能會(huì)存在不必要的影響，最好就是直接給父級(jí)設(shè)置。
• 絕對(duì)定位會(huì)使元素完全脫離文檔流（比浮動(dòng)元素的層級(jí)又高了半級(jí)）。
• 會(huì)使內(nèi)聯(lián)元素重新支持寬高
• 可以由內(nèi)容（浮動(dòng)元素）撐起寬高
• 給元素設(shè)置相對(duì)定位絕對(duì)定位都可以清除子元素的浮動(dòng)。

z-index

定義和用法

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。

可能的值

注意：

1. 此屬性僅僅作用于position 屬性值不為 static的對(duì)象。
2. 帶有定位屬性的元素層級(jí)默認(rèn)會(huì)比未帶定位屬性的元素層級(jí)高（包括相對(duì)定位）。
3. 較大number值的對(duì)象會(huì)覆蓋在較小number 值的對(duì)象之上。如果定位對(duì)象的此屬性具有同樣的 number值，那么將依據(jù)它們?cè)贖TML文檔中聲明的順序?qū)盈B。
4. z-index可以設(shè)置負(fù)數(shù)，但是一旦設(shè)置負(fù)數(shù)，會(huì)被默認(rèn)層級(jí)的元素蓋住，就算容器內(nèi)只有絕對(duì)定位元素，也將無法設(shè)置點(diǎn)擊事件，所以慎用負(fù)數(shù)。
5. 父級(jí)元素是永遠(yuǎn)無法放在子級(jí)元素之上的。
6. 不同父元素的兩個(gè)子級(jí)進(jìn)行層級(jí)的對(duì)比，比較的層級(jí)為帶有定位屬性的父元素的z-index : number值的大小。

固定定位（position：fixed）

性質(zhì)幾乎跟絕對(duì)定位一樣。唯一的差別在于參考于整個(gè)瀏覽器（屏幕）進(jìn)行定位。使用固定定位會(huì)使元素固定在瀏覽器的某個(gè)地方。但是日常使用比較少。

另：IE 6不支持固定定位。

什么時(shí)候該用浮動(dòng)？什么時(shí)候該用定位？

我有前端朋友告訴我，對(duì)于初學(xué)者來說，能用浮動(dòng)就盡量不要用定位。然而這激起了筆者的好奇心，那什么時(shí)候用浮動(dòng)，什么時(shí)候用定位呢？

其實(shí)，兩者都是按照需求使用。浮動(dòng)只需要注意清除浮動(dòng)，如果開發(fā)時(shí)需要考慮兼容性問題就多加考慮 IE 6 的雙邊距等兼容性。而使用絕對(duì)定位時(shí)記得給父級(jí)元素添加relative屬性限制住絕對(duì)定位屬性，并不會(huì)造成太大的影響。

這里需要引入一些常用布局的方式：

1. 普通布局
顧名思義，也叫自然布局，主要是依照元素本身的特性，從左到右，從上到下的進(jìn)行布局。

2. 浮動(dòng)布局
相對(duì)于普通布局，該布局元素會(huì)脫離普通布局也是流布局，相當(dāng)于浮動(dòng)元素會(huì)在普通布局之上進(jìn)行界面的布局。可能會(huì)導(dǎo)致的問題就是會(huì)有普通布局的部分被浮動(dòng)布局元素給遮擋，解決辦法為清除浮動(dòng)。浮動(dòng)布局中浮動(dòng)的范圍是根據(jù)父元素的位置進(jìn)行浮動(dòng)位置定位。

3. 絕對(duì)布局
常用的position為absolute時(shí)的元素會(huì)進(jìn)行絕對(duì)布局。一般會(huì)將參考位置元素設(shè)置為 position：relative來進(jìn)行布局。

除此之外還有固定布局、頁(yè)面自適應(yīng)布局等布局方式，因與本文無關(guān)所以不多加贅述。

通過比較我們可以發(fā)現(xiàn)，float比position更適合用來做網(wǎng)頁(yè)的布局，因?yàn)槿绻褂?code>position來進(jìn)行布局，就需要為頁(yè)面上每一個(gè)元素來設(shè)置 xy 坐標(biāo)來進(jìn)行定位，然后最后對(duì)不同分辨率的顯示器顯示效果還不盡人意。而float就顯得比較靈活。很多網(wǎng)頁(yè)都可以使用float來進(jìn)行整體布局。但是在有些地方，使用 relative和absolute布局可以實(shí)現(xiàn)更好的效果。