CSS中的定位模式規(guī)定了一個盒子在總體的布局上應(yīng)該處于什么位置以及對周圍的盒子會有什么影響。該模式包括了常規(guī)文檔流，浮動，和幾種類型的 position 定位的元素。
其中，CSS position 屬性可以取5種值：
position: absolute
position: relative
position: fixed
position: static
position: inherit
static 是 position 默認(rèn)的屬性值。任何應(yīng)用了 position:static 的元素都處于常規(guī)文檔流中。它處于什么位置以及它如何影響周邊的元素都是由盒模型所決定的。
一個 static 定位的元素會忽略所有 top，right，bottom，left 以及 z-index 屬性所聲明的值。為了讓你的元素能使用這五個屬性，你需要先為它的 position 屬性應(yīng)用這三個值的其中之一： absolute，relative，fixed
position 值為 inherit 的元素和其他所有屬性的繼承值一樣，元素會繼承父元素的 position 值。

為了后面能更好地理解，先特將此例的DOM草圖畫出來：

上面的DOM圖，我想大家一定非常容易的理解，下面就一起來主要看position的使用。

第一步：position: static

在CSS中所有元素的“position”屬性的默認(rèn)值都是“static”，因為不需要顯式的為每個元素設(shè)置“position:static”。此時大家會問，那這個屬性值是不是沒有任何意義呢？其實不是的，他在CSS中也會起著很大的作用。我們來看一個實例：

比如說你的兩個頁面，同時存在“div#div-1”，那么此時你在A面中需要對“div#div-1”進(jìn)行絕對定位；而在B頁面中“div#div-1”又不需要進(jìn)行絕對定位。

A頁面中“div#div-1”絕對定位：

此時在B頁面中不想在進(jìn)行絕對定位，那么我們就必須在你的樣式中顯式的重新設(shè)置“#div-1”的postion屬性為“static”

 第二步：相對定位position:relative

relative稱為相對定位，如果你給某個元素指定了postion的值為“relative”，那么你就可以通過“T-R-B-L”(也就是top,right,bottom,left)來設(shè)置元素的定位值。

使用relative時有幾點(diǎn)需要注意：

元素設(shè)置了relative時，是相對于元素本身位置進(jìn)行定位；
元素設(shè)置了relative后，可以通過“T-R-B-L”改變元素當(dāng)前所在的位置，但元素移位后，同樣點(diǎn)有當(dāng)初的物理空間位；
元素設(shè)置了relative后，如果沒有進(jìn)行任何的“T-R-B-L”設(shè)置，元素不會進(jìn)行任何位置改變。
上面三點(diǎn)第一點(diǎn)和第三點(diǎn)來說都是比較好理解，那么現(xiàn)在針對第二點(diǎn)，我們來看一個實例的操作：

在上面的基礎(chǔ)上，我們對“div-1”進(jìn)行向下移動20px；向左移動40px:

我們來看看效果：

從效果圖可以再次印證上面說的第二點(diǎn)。元素“div-1”向下移動了20px，向左移動了40px，本身位置變化了，而元素最初所占的物理空間依然還是存在，另外一點(diǎn)元素相對定位后并沒有影響其他相鄰的元素。

第三步：絕對定位position:absolute

absolute是position中的第三個屬性值，如果你給元素指定了absolute，整個元素就會漂出文檔流，而且元素自身的物理空間也同時消失了。不像“relative”還具有原先的物理空間。

我們來看一個實例,在div-1a元素上進(jìn)行絕對定位：

此時元素“div-1a”不在當(dāng)初的文檔流中，而且其此時定位也是相對于html來進(jìn)行定位，那么我們有時候并不是需要這樣的效果，哪果我們元素div-1a還想在div-1是進(jìn)行絕對定位，那要怎么辦呢？此時就要發(fā)揮前面第二步的“relative”作用了。

第四步：relative和absolute的結(jié)合

第二步中大家知道元素相對定位“relative”是相對于元素自身定位，而在第三步中大家知道元素絕對定位“absolute”是相對于html。但這種說法只有滿足這樣的條件才是正常的：“絕對定位元素的任何祖先元素沒有進(jìn)行任何的“relative”或者“absolute”設(shè)置，那么絕對定位的元素的參考物就是html”，這樣一來，“relative”和“absolute”的結(jié)合就能起到很大的作用。

我們接下來看一個截圖：

上圖做為一個實例來說明“relative”和“absolute”的關(guān)系，首先上圖中共有三個div放在body內(nèi)，而且他們?nèi)齻€div的關(guān)系是“div-1>div-2>div-3”,而且在div-3有這么一個絕對定位：

下面分幾個情況來說明上圖的意思：

1、div-1與div-2都沒有設(shè)置“position:relative”，此時我們的div-3絕對定位后就漂到了上圖中“div-3c”的位置上；

2、現(xiàn)在我們在div-2元素中加設(shè)置一個“position: relative”，此時我們的div-3絕對定位后就漂到了上圖中的“div-3a”的位置;

3、接下來把相對定位的設(shè)置換到div-1元素上，此時div-3絕對定位后就到了div-3b的位置。

花這么多心思，我只想說明一點(diǎn)：如果一個元素絕對定位后，其參照物是以離自身最近元素是否設(shè)置了相對定位，如果有設(shè)置將以離自己最近元素定位，如果沒有將往其祖先元素尋找相對定位元素，一直找到html為止。這句話說起起來好像有點(diǎn)拗口，不知道大家能否明白我說的是什么？如果不明白大家可以參考上圖或者下面這個實例效果：

回到上面的實例中，如果我們在“div-1”加一個“relative”：

現(xiàn)在我們相對點(diǎn)不在是第三步中的body了，而是“div-1”了，大家看看與第三步的變化：

第五步：relative和absolute實現(xiàn)布局效果

這一步只要想演示一下使用相對定位和絕對定位實現(xiàn)的兩例布局。在前面的基礎(chǔ)上，div-1進(jìn)行相對定位，而div-1a和div-1b進(jìn)行絕對定位，從而實現(xiàn)兩列布局的效果：

這樣的制作只是用來說明absolute的作用，如果只能實現(xiàn)上面的效果，可能在實際制作中并不完美，為了讓其更完美一些，在這個基礎(chǔ)上我們在來看下面這一步。

第六步：設(shè)置固定高度

為了讓布局更適用一些，可以在div-1元素上設(shè)置固定高度，如：

相比之下好一點(diǎn)，但我們并不知道元素內(nèi)容高度將會是多少，所以在此設(shè)置一個固定高度也是我們實際中的一個死穴，個人不建議這樣使用。如果為了需要，我們可以通過別的辦法來實現(xiàn)。

第七步：float

前兩步，使用絕對定位都并不是很理想，那么我們可以考慮使用float來解決。我們可以在一個元素上使用float，讓元素向左或向右，而且還可以使用文本圍繞在這個元素的周邊（這個作用在文本圍繞圖片特別有用）。下面來模擬一下：

第八步：多列浮動

上面展示的是一個列浮動，接下來看看多列的變化：

浮動與絕對定位來相比，現(xiàn)在解決了其高度自適應(yīng)的問題，但也存在一個問題，浮動也破壞了元素當(dāng)初的文檔流，使其父元素塌陷了，那么為了解決這個問題，我們有必要對其進(jìn)行清除浮動。

第九步：清除浮動

為了讓浮動元素的父元素不在處于塌陷狀態(tài)下，我們需要對浮動元素進(jìn)行清除浮動：

最新評論