圖解CSS中position屬性的定位用法

W3CPlus 發(fā)布時(shí)間：2016-04-28 11:41:44 作者：barelyfitz

這篇文章主要介紹了圖解CSS中position屬性的定位用法,重點(diǎn)講解了相對(duì)定位和絕對(duì)定位在頁(yè)面布局中的作用,需要的朋友可以參考下

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

為了后面能更好地理解，先特將此例的DOM草圖畫出來(lái)：
2016428114508893.png (290×194)

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

第一步：position: static

在CSS中所有元素的“position”屬性的默認(rèn)值都是“static”，因?yàn)椴恍枰@式的為每個(gè)元素設(shè)置“position:static”。此時(shí)大家會(huì)問(wèn)，那這個(gè)屬性值是不是沒(méi)有任何意義呢？其實(shí)不是的，他在CSS中也會(huì)起著很大的作用。我們來(lái)看一個(gè)實(shí)例：

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

A頁(yè)面中“div#div-1”絕對(duì)定位：

CSS Code復(fù)制內(nèi)容到剪貼板

#div-1 {
position: absolute;
}

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

CSS Code復(fù)制內(nèi)容到剪貼板

body.B #div-1 {
position: static;
}

第二步：相對(duì)定位position:relative

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

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

#div-1 {
position:relative;
top:20px;
left:-40px;
}

我們來(lái)看看效果：
2016428114620479.png (464×301)

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

第三步：絕對(duì)定位position:absolute

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

我們來(lái)看一個(gè)實(shí)例,在div-1a元素上進(jìn)行絕對(duì)定位：

CSS Code復(fù)制內(nèi)容到剪貼板

#div-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}

2016428114649754.png (425×285)

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

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

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

我們接下來(lái)看一個(gè)截圖：
2016428114712498.png (425×285)

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

CSS Code復(fù)制內(nèi)容到剪貼板

.div-3 {
position: absolute;
left:0;
top:0;
}

下面分幾個(gè)情況來(lái)說(shuō)明上圖的意思：

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

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

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

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

回到上面的實(shí)例中，如果我們?cè)?ldquo;div-1”加一個(gè)“relative”：

CSS Code復(fù)制內(nèi)容到剪貼板

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

2016428114852527.png (410×180)

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

2016428114918575.png (409×298)

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

第七步：float

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

CSS Code復(fù)制內(nèi)容到剪貼板

#div-1a {
float:left;
width:200px;
}

2016428114945829.png (407×248)

第八步：多列浮動(dòng)

上面展示的是一個(gè)列浮動(dòng)，接下來(lái)看看多列的變化：

CSS Code復(fù)制內(nèi)容到剪貼板

#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

2016428115028500.png (408×252)

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

第九步：清除浮動(dòng)

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

CSS Code復(fù)制內(nèi)容到剪貼板