我們先來(lái)看看CSS3 Api中對(duì)position屬性的相關(guān)定義:
static:無(wú)特殊定位,對(duì)象遵循正常文檔流。top,right,bottom,left等屬性不會(huì)被應(yīng)用。
relative:對(duì)象遵循正常文檔流,但將依據(jù)top,right,bottom,left等屬性在正常文檔流中偏移位置。而其層疊通過(guò)z-index屬性定義。
absolute:對(duì)象脫離正常文檔流,使用top,right,bottom,left等屬性進(jìn)行絕對(duì)定位。而其層疊通過(guò)z-index屬性定義。
fixed:對(duì)象脫離正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點(diǎn)進(jìn)行定位,當(dāng)出現(xiàn)滾動(dòng)條時(shí),對(duì)象不會(huì)隨著滾動(dòng)。而其層疊通過(guò)z-index屬性定義。
怎么樣,是不是還是很迷糊~~ 沒(méi)關(guān)系,下面就從幾個(gè)基礎(chǔ)概念一一給大家詳述:
什么是文檔流?
將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。
只有三種情況會(huì)使得元素脫離文檔流,分別是:浮動(dòng)、絕對(duì)定位和相對(duì)定位。
靜態(tài)定位(static) :
static,無(wú)特殊定位,它是html元素默認(rèn)的定位方式,即我們不設(shè)定元素的position屬性時(shí)默認(rèn)的position值就是static,它遵循正常的文檔流對(duì)象,對(duì)象占用文檔空間,該定位方式下,top、right、bottom、left、z-index等屬性是無(wú)效的。
相對(duì)定位(relative) :
relative定位,又稱(chēng)為相對(duì)定位,從字面上來(lái)解析,我們就可以看出該屬性的主要特性:相對(duì)。但是它相對(duì)的又是相對(duì)于什么地方而言的呢?這個(gè)是個(gè)重點(diǎn),也是最讓我迷糊的一個(gè)地方,現(xiàn)在讓我們來(lái)做個(gè)測(cè)試,我想大家都會(huì)明白的:
(1) 初始未定位
[html] view plain copy
/******初始*********/
<style type="text/css">
#first { width: 200px; height: 100px; border: 1px solid red; }
#second{ width: 200px; height: 100px; border: 1px solid blue;}
</style>
<body>
<div id="first"> first</div>
<div id="second">second</div>
</body>
初始原圖:
(2) 我們修改first元素的position屬性:
[html] view plain copy
<style type="text/css">
#first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /add position/
#second{width: 200px; height: 100px; border: 1px solid blue;}
</style>
相對(duì)偏移20px后:
現(xiàn)在看明白了吧,相對(duì)定位相對(duì)的是它原本在文檔流中的位置而進(jìn)行的偏移,而我們也知道relative定位也是遵循正常的文檔流,它沒(méi)有脫離文檔流,但是它的top/left/right/bottom屬性是生效的,可以說(shuō)它是static到absoult的一個(gè)中間過(guò)渡屬性,最重要的是它還占有文檔空間,而且占據(jù)的文檔空間不會(huì)隨 top / right / left / bottom 等屬性的偏移而發(fā)生變動(dòng),也就是說(shuō)它后面的元素是依據(jù)虛線位置( top / left / right / bottom 等屬性生效之前)進(jìn)行的定位,這點(diǎn)一定要理解。
那好,我們知道了top / right / left / bottom 屬性是不會(huì)對(duì)relative定位的元素所占據(jù)的文檔空間產(chǎn)生偏移,那么margin / padding會(huì)讓該文檔空間產(chǎn)生偏移嗎?答案是肯定的,我們一起來(lái)做個(gè)試驗(yàn)吧:
(3) 添加margin屬性:
[html] view plain copy
<style type="text/css">
#first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/
#second{width: 200px;height:100px;border: 1px solid blue;}
</style>
對(duì)比一下,是不是就很清晰了,我們先將first元素外邊距設(shè)為20px,那么second元素就得向下偏移40px,所以margin是占據(jù)文檔空間!同理,大家可以自己動(dòng)手測(cè)下padding的效果吧!
絕對(duì)定位(absoulte) :
absoulte定位,也稱(chēng)為絕對(duì)定位,雖然它的名字號(hào)曰“絕對(duì)”,但是它的功能卻更接近于"相對(duì)"一詞,為什么這么講呢?原來(lái),使用absoult定位的元素脫離文檔流后,就只能根據(jù)祖先類(lèi)元素(父類(lèi)以上)進(jìn)行定位,而這個(gè)祖先類(lèi)還必須是以postion非static方式定位的, 舉個(gè)例子,a元素使用absoulte定位,它會(huì)從父類(lèi)開(kāi)始找起,尋找以position非static方式定位的祖先類(lèi)元素(注意,一定要是直系祖先才算哦~),直到<html>標(biāo)簽為止,這里還需要注意的是,relative和static方式在最外層時(shí)是以<body>標(biāo)簽為定位原點(diǎn)的,而absoulte方式在無(wú)父級(jí)是position非static定位時(shí)是以<html>作為原點(diǎn)定位。<html>和<body>元素相差9px左右。我們來(lái)看下效果:
(4) 添加absoulte屬性:
[html] view plain copy
<html>
<style type="text/css">
html{border:1px dashed green;}
body{border:1px dashed purple;}
#first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}
#second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}
</style>
<body>
<div id="first">relative</div>
<div id="second">absoult</div>
</body>
</html>
哈哈,看了上面的代碼后,細(xì)心的朋友肯定要問(wèn)了,為什么absoulte定位要加 top:0; left:0; 屬性,這不是多此一舉呢?
其實(shí)加上這兩個(gè)屬性是完全必要的,因?yàn)槲覀內(nèi)绻?使用absoulte或fixed定位的話,必須指定 left、right、 top、 bottom 屬性中的至少一個(gè),否則left/right/top/bottom屬性會(huì)使用它們的默認(rèn)值 auto ,這將導(dǎo)致對(duì)象遵從正常的HTML布局規(guī)則,在前一個(gè)對(duì)象之后立即被呈遞**,**簡(jiǎn)單講就是都變成relative,*會(huì)占用文檔空間,這點(diǎn)非常重要,很多人使用absolute定位后發(fā)現(xiàn)沒(méi)有脫離文檔流就是這個(gè)原因,這里要特別注意~~~
少了left/right/top/bottom屬性不行,那如果我們多設(shè)了呢?例如,我們同時(shí)設(shè)置了top和bottom的屬性值,那元素又該往哪偏移好呢?記住下面的規(guī)則:
如果top和bottom一同存在的話,那么只有top生效。
如果left和right一同存在的話,那么只有l(wèi)eft生效。
既然absoulte是根據(jù)祖先類(lèi)中的position非static元素進(jìn)行定位的,那么祖先類(lèi)中的margin/padding會(huì)不會(huì)對(duì)position產(chǎn)生影響呢?看個(gè)例子先:
(5) 在absoulte定位中添加margin / padding屬性:
[html] view plain copy
first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;}
second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;}
<div id="first">first
<div id="second">second</div>
</div>
效果圖:
[圖片上傳中。。。(5)]
看懂了,祖先類(lèi)的margin會(huì)讓子類(lèi)的absoulte跟著偏移,而padding卻不會(huì)讓子類(lèi)的absoulte發(fā)生偏移。總結(jié)一下,就是absoulte是根據(jù)祖先類(lèi)的border進(jìn)行的定位。
***Note : ***絕對(duì)(absolute)定位對(duì)象在可視區(qū)域之外會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。而放置相對(duì)(relative)定位對(duì)象在可視區(qū)域之外,滾動(dòng)條不會(huì)出現(xiàn)。
固定定位(fixed):
fixed定位,又稱(chēng)為固定定位,它和absoult定位一樣,都脫離了文檔流,并且能夠根據(jù)top、right、left、bottom屬性進(jìn)行定位,但不同的是fixed是根據(jù)窗口為原點(diǎn)進(jìn)行偏移定位的,也就是說(shuō)它不會(huì)根據(jù)滾動(dòng)條的滾動(dòng)而進(jìn)行偏移。
z-index屬性:
z-index,又稱(chēng)為對(duì)象的層疊順序,它用一個(gè)整數(shù)來(lái)定義堆疊的層次,整數(shù)值越大,則被層疊在越上面,當(dāng)然這是指同級(jí)元素間的堆疊,如果兩個(gè)對(duì)象的此屬性具有同樣的值,那么將依據(jù)它們?cè)贖TML文檔中流的順序?qū)盈B,寫(xiě)在后面的將會(huì)覆蓋前面的。需要注意的是,父子關(guān)系是無(wú)法用z-index來(lái)設(shè)定上下關(guān)系的,一定是子級(jí)在上父級(jí)在下。
Note:使用static 定位或無(wú)position定位的元素z-index屬性是無(wú)效的。