本篇文章給大家?guī)?lái)了關(guān)于css的相關(guān)知識(shí)，其中主要介紹了關(guān)于css的絕對(duì)定位和相對(duì)定位的相關(guān)問(wèn)題，相對(duì)定位是元素在移動(dòng)位置的時(shí)候，是相對(duì)于它原來(lái)的位置來(lái)說(shuō)的，絕對(duì)定位是元素在移動(dòng)位置的時(shí)候，是相對(duì)于它的祖先元素來(lái)說(shuō)的，下面一起來(lái)看一下，希望對(duì)大家有幫助。

（學(xué)習(xí)視頻分享：css視頻教程、html視頻教程）

position:relative 相對(duì)定位詳解

相對(duì)定位是元素在移動(dòng)位置的時(shí)候，是相對(duì)于它原來(lái)的位置來(lái)說(shuō)的。

相對(duì)定位的特點(diǎn)：

• 它是相對(duì)于自己原來(lái)的位置來(lái)移動(dòng)的(移動(dòng)位置的時(shí)候參考點(diǎn)是自己原來(lái)的位置)

• 原來(lái)在標(biāo)準(zhǔn)流的位置繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方對(duì)待它(不脫標(biāo)，繼續(xù)保留原來(lái)的位置)。因此相對(duì)定位并沒(méi)有脫標(biāo)，它最典型的應(yīng)用是給絕對(duì)定位當(dāng)?shù)摹?/p>

position:absolute 絕對(duì)定位詳解

絕對(duì)定位是元素在移動(dòng)位置的時(shí)候，是相對(duì)于它的祖先元素來(lái)說(shuō)的（拼爹型）。

絕對(duì)定位的特點(diǎn)：

• 如果沒(méi)有祖先元素或者祖先元素沒(méi)有定位，則以瀏覽器為準(zhǔn)進(jìn)行定位(Document文檔)

• 如果祖先元素有定位(相對(duì)，絕對(duì)，固定定位)，則以最近一級(jí)的有定位祖先元素為參考點(diǎn)移動(dòng)位置。

• 絕對(duì)定位不再占有原有的位置(脫標(biāo))。

下面講解子絕父相的由來(lái)和具體使用：

子絕父相的意思是指：子級(jí)是絕對(duì)定位的話(huà)，父級(jí)要用相對(duì)定位。

• 子級(jí)絕對(duì)定位，不會(huì)占有位置，可以放到父盒子里面的任何一個(gè)位置，不會(huì)影響其他的兄弟盒子。

• 父盒子需要加定位限制子盒子在父盒子內(nèi)顯示。

• 父盒子布局時(shí)，需要占有位置，因此父親只能是相對(duì)定位。

總結(jié)：因?yàn)楦讣?jí)需要占有位置，因此是相對(duì)定位，子盒子不需要占有定位，則是絕對(duì)定位。

示例如下：

css標(biāo)簽的相對(duì)定位和絕對(duì)定位是通過(guò)position屬性來(lái)控制的，相對(duì)定位和絕對(duì)定位不改變?cè)氐拇笮⌒螤?，只改變?cè)氐奈恢谩?/p>

一、position屬性的值有以下幾種：

• static:默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的流中。

• absolute:使用絕對(duì)定位，相對(duì)于static定位以外的最近一個(gè)祖先元素進(jìn)行定位。元素的位置通過(guò)left,top,right以及bottom屬性進(jìn)行規(guī)定。

• relative:使元素相對(duì)定位，相對(duì)于自己的正常位置進(jìn)行定位。

• fixed:使元素絕對(duì)定位，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò)left,top,right以及bottom屬性進(jìn)行規(guī)定。

• inherit:規(guī)定應(yīng)該從父元素繼承position屬性的值。

一個(gè)沒(méi)有使用定位的例子：

顯示結(jié)果如下：

二、相對(duì)定位

相對(duì)定位的參考點(diǎn)是標(biāo)簽定位之前的位置，不是相對(duì)于父節(jié)點(diǎn)、同級(jí)節(jié)點(diǎn)或?yàn)g覽器。

   相對(duì)定位的元素，通過(guò) left、right 屬性來(lái)定義水平偏移量，top、bottom 屬性來(lái)定義垂直偏移量。left 表示相對(duì)于原本位置的左外邊界右移的距離，right 表示相對(duì)于原本位置的右外邊界左移的距離，top 表示相對(duì)于原本位置的上外邊界下移的距離，bottom 表示相對(duì)于原本位置的下外邊界上移的距離。并且，偏移量可以是正值，也可以是負(fù)值，負(fù)值表示向相反的方向移動(dòng)。     left、right、top、bottom 這 4 個(gè)屬性的值，可以是長(zhǎng)度值（可以是絕對(duì)單位或相對(duì)單位），也可以是百分比。使用百分比時(shí)，水平偏移量根據(jù)其父元素 width 屬性的值計(jì)算得到，垂直偏移量根據(jù)其父元素 height 屬性的值計(jì)算得到。需要注意的是，在設(shè)置偏移時(shí)，如果父元素沒(méi)有顯式定義 height 屬性，就等同于 height 屬性的值為 0。

對(duì)上例進(jìn)行修改，對(duì)p2使用相對(duì)定位：

效果如下：

三、絕對(duì)定位：

絕對(duì)定位相對(duì)于最近的定位的祖先元素進(jìn)行定位，如果沒(méi)有祖先元素，他便使用文檔主體（body）即瀏覽器，并隨頁(yè)面滾動(dòng)一起移動(dòng)；如果父級(jí)有定位則看父級(jí)，如果父級(jí)沒(méi)有定位則繼續(xù)向上找父級(jí)。

絕對(duì)定位的元素是脫離文檔流的，即直接在標(biāo)準(zhǔn)流中刪除，所以元素原來(lái)的位置會(huì)被占用。

對(duì)上例進(jìn)行修改（無(wú)父節(jié)點(diǎn)）：

效果如下：

再如（父節(jié)點(diǎn)有定位）：

不使用絕對(duì)定位時(shí)：

效果如下：

使用絕對(duì)定位：

效果如下：

（學(xué)習(xí)視頻分享：css視頻教程、html視頻教程）