這篇文章主要介紹“css中position屬性的概述及應(yīng)用”，在日常操作中，相信很多人在css中position屬性的概述及應(yīng)用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css中position屬性的概述及應(yīng)用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都網(wǎng)站制作、成都做網(wǎng)站的關(guān)注點(diǎn)不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒(méi)有做好網(wǎng)站，給成都創(chuàng)新互聯(lián)公司一個(gè)展示的機(jī)會(huì)來(lái)證明自己，這并不會(huì)花費(fèi)您太多時(shí)間，或許會(huì)給您帶來(lái)新的靈感和驚喜。面向用戶友好，注重用戶體驗(yàn)，一切以用戶為中心。

我們先來(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定位，又稱為相對(duì)定位，從字面上來(lái)解析，我們就可以看出該屬性的主要特性：相對(duì)。但是它相對(duì)的又是相對(duì)于什么地方而言的呢？這個(gè)是個(gè)重點(diǎn)，也是最讓我迷糊的一個(gè)地方，現(xiàn)在讓我們來(lái)做個(gè)測(cè)試，我想大家都會(huì)明白的：

(1) 初始未定位

代碼如下:

/******初始*********/  
 
 
 

初始原圖：

(2) 我們修改first元素的position屬性：

代碼如下:

偏移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屬性：

代碼如下:

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

對(duì)比一下，是不是就很清晰了，我們先將first元素外邊距設(shè)為20px，那么second元素就得向下偏移40px，所以margin是占據(jù)文檔空間！同理，大家可以自己動(dòng)手測(cè)下padding的效果吧！

絕對(duì)定位(absoulte) ：

       absoulte定位，也稱為絕對(duì)定位，雖然它的名字號(hào)曰“絕對(duì)”，但是它的功能卻更接近于"相對(duì)"一詞，為什么這么講呢？原來(lái)，使用absoult定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進(jìn)行定位，而這個(gè)祖先類還必須是以postion非static方式定位的， 舉個(gè)例子，a元素使用absoulte定位，它會(huì)從父類開(kāi)始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算哦~），直到標(biāo)簽為止，這里還需要注意的是，relative和static方式在最外層時(shí)是以標(biāo)簽為定位原點(diǎn)的，而absoulte方式在無(wú)父級(jí)是position非static定位時(shí)是以作為原點(diǎn)定位。和元素相差9px左右。我們來(lái)看下效果：

(4) 添加absoulte屬性：

代碼如下:

效果圖：

        哈哈，看了上面的代碼后，細(xì)心的朋友肯定要問(wèn)了，為什么absoulte定位要加 top:0; left:0; 屬性，這不是多此一舉呢？

       其實(shí)加上這兩個(gè)屬性是完全必要的，因?yàn)槲覀內(nèi)绻褂胊bsoulte或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ù)祖先類中的position非static元素進(jìn)行定位的，那么祖先類中的margin/padding會(huì)不會(huì)對(duì)position產(chǎn)生影響呢？看個(gè)例子先：

(5) 在absoulte定位中添加margin / padding屬性：

代碼如下:

#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;}

效果圖：

看懂了，祖先類的margin會(huì)讓子類的absoulte跟著偏移，而padding卻不會(huì)讓子類的absoulte發(fā)生偏移?？偨Y(jié)一下，就是absoulte是根據(jù)祖先類的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定位，又稱為固定定位，它和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，又稱為對(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ú)效的。

到此，關(guān)于“css中position屬性的概述及應(yīng)用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！