CSS中position屬性( absolute | relative | static | fixed )詳解

我們先來(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>

設(shè)置margin:20px后:

對(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ú)效的。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫(huà)出這些圖形,要比...
    劍殘閱讀 9,656評(píng)論 0 8
  • 我們先來(lái)看看CSS3 Api中對(duì)position屬性的相關(guān)定義: static:無(wú)特殊定位,對(duì)象遵循正常文檔流。t...
    __越過(guò)山丘__閱讀 562評(píng)論 0 0
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,792評(píng)論 1 92
  • Html 標(biāo)簽 斜體 粗體 單獨(dú)的樣式 引用文本 長(zhǎng)文本引用 換行 空格 分割線 地址信息 單行代碼 多行代碼 無(wú)...
    SunnySky_閱讀 563評(píng)論 0 5
  • ――當(dāng)我二十幾歲時(shí)說(shuō)出凱魯亞克的那句:“永遠(yuǎn)年輕,永遠(yuǎn)熱淚盈眶。”我堅(jiān)信這是純粹的,赤誠(chéng)的。 張愛(ài)玲在《十八春》里...
    趙斯年0622閱讀 400評(píng)論 0 6