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

成都創(chuàng)新互聯(lián)是一家以網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、成都網(wǎng)站營(yíng)銷、小程序App開發(fā)等移動(dòng)開發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為成都展覽展示等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

。

定位(position)

background-position 背景定位

如果，說(shuō)浮動(dòng)， 關(guān)鍵在一個(gè) “浮” 字上面， 那么 我們的定位，關(guān)鍵在于一個(gè) “位” 上。

PS: 定位是我們CSS算是數(shù)一數(shù)二難點(diǎn)的了，但是，你務(wù)必要學(xué)好它，我們CSS離不開定位，特別是后面的js特效，天天和定位打交道。不要抵觸它，反而要愛上它，它可以讓我們工作更加輕松哦！

為什么要用定位？

那么定位，最長(zhǎng)運(yùn)用的場(chǎng)景再那里呢？ 來(lái)看幾幅圖片，你一定會(huì)有感悟！

1. 小黃色塊可以再圖片上移動(dòng)：
   

2. 左右箭頭壓住圖片：
   

3. hot 再盒子外面多出一塊，更加突出：
   
   以上三個(gè)小地方，如果用標(biāo)準(zhǔn)流或者浮動(dòng)，實(shí)現(xiàn)會(huì)比較復(fù)雜或者難以實(shí)現(xiàn)，此時(shí)我們用定位來(lái)做。

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移

也就說(shuō)，以后定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

2、定位模式(定位的分類)

在CSS中，position屬性用于定義元素的定位模式，其基本語(yǔ)法格式如下：

選擇器{position:屬性值;}

position屬性的常用值

靜態(tài)定位(static)

靜態(tài)定位是所有元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。

上面的話翻譯成白話： 就是網(wǎng)頁(yè)中所有元素都默認(rèn)的是靜態(tài)定位。 其實(shí)就是標(biāo)準(zhǔn)流的特性。

在靜態(tài)定位狀態(tài)下，無(wú)法通過(guò)邊偏移屬性（top、bottom、left或right）來(lái)改變?cè)氐奈恢谩?/mark>

其實(shí)沒啥，靜態(tài)定位唯一的用處：就是 取消定位。 position: static;

相對(duì)定位relative(自戀型)

相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對(duì)（自己的）位置。

對(duì)元素設(shè)置相對(duì)定位后，可以通過(guò)邊偏移屬性改變?cè)氐奈恢茫?mark>但是它在文檔流中的位置仍然保留（保留原來(lái)所占位置）。如下圖所示，即是一個(gè)相對(duì)定位的效果展示：

注意：

1. 相對(duì)定位最重要的一點(diǎn)是，它可以通過(guò)邊偏移移動(dòng)位置，但是原來(lái)的所占的位置，繼續(xù)占有。

2. 其次，每次移動(dòng)的位置，是以自己的左上角為基點(diǎn)移動(dòng)（相對(duì)于自己來(lái)移動(dòng)位置）

就是說(shuō)，相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它。（相對(duì)定位不脫標(biāo)）

如果說(shuō)浮動(dòng)的主要目的是 讓多個(gè)塊級(jí)元素一行顯示，那么定位的主要價(jià)值就是 移動(dòng)位置， 讓盒子到我們想要的位置上去。

絕對(duì)定位absolute (拼爹型)

[注意] 如果文檔可滾動(dòng)，絕對(duì)定位元素會(huì)隨著它滾動(dòng)，因?yàn)樵刈罱K會(huì)相對(duì)于正常流的某一部分定位。

當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。

注意： 絕對(duì)定位最重要的一點(diǎn)是，它可以通過(guò)邊偏移移動(dòng)位置，但是它完全脫標(biāo)，完全不占位置。

絕對(duì)定位absolute又分三種情況：

1.父級(jí)沒有定位

若所有父元素都沒有定位，以瀏覽器當(dāng)前屏幕為準(zhǔn)對(duì)齊(document文檔)。

2.父級(jí)有定位

絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素（祖先）進(jìn)行定位。

3.子絕父相 ※※

這句話的意思是子級(jí)是絕對(duì)定位的話， 父級(jí)要用相對(duì)定位。

首先， 我們說(shuō)下， 絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位絕對(duì)、固定或相對(duì)定位）的父元素（祖先）進(jìn)行定位。

就是說(shuō)，子級(jí)是絕對(duì)定位，父親只要是定位即可（不管父親是絕對(duì)定位還是相對(duì)定位，甚至是固定定位都可以），就是說(shuō)， 子絕父絕，子絕父相都是正確的。但是，極力推薦用相對(duì)位置

但是，在我們網(wǎng)頁(yè)布局的時(shí)候， 最常說(shuō)的 子絕父相是怎么來(lái)的呢？ 請(qǐng)看如下圖：

所以，我們可以得出如下結(jié)論：

因?yàn)樽蛹?jí)是絕對(duì)定位，不會(huì)占有位置， 可以放到父盒子里面的任何一個(gè)地方。

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

這就是子絕父相的由來(lái)。

絕對(duì)定位的盒子水平/垂直居中

普通的盒子是左右margin 改為 auto就可， 但是對(duì)于絕對(duì)定位就無(wú)效了

定位的盒子也可以水平或者垂直居中，有一個(gè)算法。

1. 首先left 50% 父盒子的一半大小

2. 然后走自己外邊距負(fù)的一半值就可以了 margin-left。

代碼示例

固定定位fixed(認(rèn)死理型)

固定定位是絕對(duì)定位的一種特殊形式，類似于 正方形是一個(gè)特殊的 矩形。它以瀏覽器窗口作為參照物來(lái)定義網(wǎng)頁(yè)元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。

當(dāng)對(duì)元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來(lái)定義自己的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點(diǎn)：

1. 固定定位的元素跟父親沒有任何關(guān)系，只認(rèn)瀏覽器。

2. 固定定位完全脫標(biāo)，不占有位置，不隨著滾動(dòng)條滾動(dòng)。

ie6等低版本瀏覽器不支持固定定位。

疊放次序（z-index）

當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊。

在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對(duì)定位元素應(yīng)用z-index層疊等級(jí)屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。

比如： z-index: 2; font-weight: 700

注意：

1. z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。

2. 如果取值相同，則根據(jù)書寫順序，后來(lái)居上。

3. 后面數(shù)字一定不能加單位。

4. 只有相對(duì)定位，絕對(duì)定位，固定定位有此屬性，其余標(biāo)準(zhǔn)流，浮動(dòng)，靜態(tài)定位都無(wú)此屬性，亦不可指定此屬性。

四種定位總結(jié)

定位模式轉(zhuǎn)換

跟 浮動(dòng)一樣， 元素添加了 絕對(duì)定位和固定定位之后， 元素模式也會(huì)發(fā)生轉(zhuǎn)換， 都轉(zhuǎn)換為行內(nèi)塊模式，

行內(nèi)塊 的寬度和高度 跟內(nèi)容有關(guān)系

** 因此 比如 行內(nèi)元素 如果添加了 絕對(duì)定位或者 固定定位后 浮動(dòng)后，可以不用轉(zhuǎn)換模式，直接給高度和寬度就可以了。**

順豐案例

	
	
	
	
		
			
		
		
			

				
快遞查詢
				
快遞查詢
				
快遞查詢
				
快遞查詢
				
快遞查詢
				
快遞查詢
			

		

	

到此，關(guān)于“css定位position屬性怎么使用”的學(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í)用的文章！