CSS：絕對(duì)定位、相對(duì)定位、固定定位

對(duì)定位

position:

absolute

特性：

1、脫離文檔流，定位元素占據(jù)的位置會(huì)釋放
2、原點(diǎn)計(jì)算：如果該元素做了定位，那么就去找它做了定位的父元素（找最近的）作為原點(diǎn)基準(zhǔn)，如果父元素都沒(méi)做定位，則以瀏覽器(0,0)作為原點(diǎn)基準(zhǔn)。
3、對(duì)內(nèi)嵌元素定位后，設(shè)置寬高屬性就會(huì)有效果

應(yīng)用場(chǎng)景：

一般情況下，絕對(duì)定位用在下拉菜單、焦點(diǎn)圖輪播、彈出數(shù)字氣泡、特別花邊等場(chǎng)景

相對(duì)定位

position:

relative

1、不脫離文檔流，定位元素占據(jù)的位置不會(huì)被釋放/
2、原點(diǎn)計(jì)算：以父級(jí)元素作為原點(diǎn)基準(zhǔn)，若沒(méi)有父級(jí)元素則以瀏覽器(0,0)為基準(zhǔn)。
一般的應(yīng)用：父相子絕
3、父元素為相對(duì)定位，子元素為絕對(duì)定位，文檔元素不會(huì)受影響。
4、父元素提供相對(duì)定位后，子元素以父元素為基準(zhǔn)來(lái)進(jìn)行定位。

應(yīng)用場(chǎng)景：

相對(duì)定位一般情況下很少自己?jiǎn)为?dú)使用，都是配合絕對(duì)定位使用，為絕對(duì)定位創(chuàng)造定位父級(jí)而又不設(shè)置偏移量

固定定位

position:

fixed

1、脫離了文檔流
2、原點(diǎn)計(jì)算：以瀏覽器(0,0)作為原點(diǎn)基準(zhǔn)，盡管父元素做了定位也不會(huì)影響它的原點(diǎn)
基準(zhǔn)。

應(yīng)用場(chǎng)景：

一般在網(wǎng)頁(yè)中被用在窗口左右兩邊的固定廣告、返回頂部圖標(biāo)、吸頂導(dǎo)航欄等

注意：使用定位后會(huì)激活如下5個(gè)屬性

left | right | top | bottom | z-index
z-index
改變定位后的疊放順序
取值范圍：-1~9999

其他：

設(shè)置網(wǎng)頁(yè)元素的透明度

opacity: 0~1;
filter: opacity(0.2) | contrast(0.2)

絕對(duì)定位（absolute）代碼案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對(duì)定位</title>
<style type="text/css">
/*絕對(duì)定位：
*1、脫離文檔流，做了定位后它占據(jù)的位置會(huì)釋放。
*2、原點(diǎn)計(jì)算：如果該元素做了定位，那么就去找它做了定位的父元素（最近）作為原點(diǎn)基準(zhǔn)，若果父元素
* 都沒(méi)做定位，則以瀏覽器(0,0)作為原點(diǎn)基準(zhǔn)。
*3、對(duì)內(nèi)嵌元素做了定位后，它的寬度高度屬性就會(huì)有效。
*/
*{
padding: 0px;
margin: 0px;
}
.box-father{
width: 500px;
height: 500px;
margin-left: 500px;
background-color: yellow;
position: absolute;
}
.son{
width: 400px;
height: 400px;
margin-left: 20px;
background-color: black;
position: absolute;
}
.box{
width: 300px;
height: 300px;
background-color: blue;
/*絕對(duì)定位*/
position: absolute;
/*激活4個(gè)屬性*/
left: 150px;
/*right: ;*/
top: 100px;
/*bottom: ;*/
}
.box2{
width: 400px;
height: 400px;
background-color: red;
}
span{
width: 200px;
height: 200px;
background-color: green;
/* position: absolute;*/
float: left;
}
</style>
</head>
<body>
<div class="zx"> 
<div class="box-father"> 
<div class="son"> 
<div class="box"> 

</div>
</div>
</div>
</div>
<div class="box2">

</div>
<span>我是span</span>
</body>
</html>

定定位

position:fixed;

用我自己的話(huà)來(lái)說(shuō)，就是讓你想要固定的東西固定。例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			body{
				height: 2000px;
				
			}
			
			.photo{
				width: 600px;
				height: 600px;
				position: fixed;
				left: calc(50%-300px);
				top: calc(50%-300px);
				
			}
		</style>
		
	</head>
	<body>
		10月7日，昆凌在社交平臺(tái)曬出自己蕩秋千的美照。
		照片中，昆凌長(zhǎng)發(fā)披肩，頭戴假日風(fēng)草帽，
		穿一襲白裙在海邊蕩著秋千，回眸甜笑，宛若仙子。
		<div id="box1">
			<img src="img/kunling.jpg" class="photo">
		</div>
		
	</body>
</html>

對(duì)了，在這里說(shuō)一下，我目前是在職web前端開(kāi)發(fā)，如果你現(xiàn)在正在學(xué)習(xí)前端，了解前端，渴望成為一名合格的web前端開(kāi)發(fā)工程師，在入門(mén)學(xué)習(xí)前端的過(guò)程當(dāng)中有遇見(jiàn)任何關(guān)于學(xué)習(xí)方法，學(xué)習(xí)路線(xiàn)，學(xué)習(xí)效率等方面的問(wèn)題，都可以隨時(shí)關(guān)注并私信我：前端，我都會(huì)根據(jù)大家的問(wèn)題給出針對(duì)性的建議，缺乏基礎(chǔ)入門(mén)的視頻教程也可以直接來(lái)找我，我這邊有最新的web前端基礎(chǔ)精講視頻教程，還有我做web前端技術(shù)這段時(shí)間整理的一些學(xué)習(xí)手冊(cè)，面試題，開(kāi)發(fā)工具，PDF文檔書(shū)籍教程，都可以直接分享給大家。

當(dāng)我下拉時(shí)，圖片的位置是不會(huì)動(dòng)的。即使下滑到了最底部，圖片的位置也是固定的。對(duì)比下面這張圖：

絕對(duì)定位和相對(duì)定位

子絕父相

子絕父相就是指子元素設(shè)置絕對(duì)定位，而父元素設(shè)置相對(duì)定位。換句話(huà)說(shuō)：如果要對(duì)一個(gè)子元素使用定位的話(huà)，讓子元素（絕對(duì)定位）以其父元素（相對(duì)定位）為標(biāo)準(zhǔn)來(lái)定位。

實(shí)操代碼理解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father{
				width: 300px;
				height: 300px;
				background-color: coral;
				position: relative;
				border: solid 3px red;
			}
			
			#son1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
				left: 20px;
				top: 50px;
			}
			
			#son2{
				width: 100px;
				height: 100px;
				background-color: chartreuse;
				position: absolute;
				left: 40px;
				top: 90px;
			}
		</style>
	</head>
	<body>
		
		<div id="father">
			I am father
		</div>
		
		<div id="son1">
			I am son1
		</div>
		
		<div id="son2">
			I am son2
		</div>
		
	</body>
</html>

看圖：在father這個(gè)容器設(shè)置了相對(duì)定位之后，son1和son2都設(shè)置了絕對(duì)定位，我們的子類(lèi)這時(shí)其實(shí)不是在body中絕對(duì)定位（absolute），而是在其父類(lèi)的范圍中絕對(duì)定位（absolute）。

絕對(duì)定位

position: absolute;

查找定位的參照物方法：
從當(dāng)前元素開(kāi)始往上找，直到找到一個(gè)具有定位屬性的元素為準(zhǔn)，以這個(gè)元素為參照進(jìn)行定位。
如果沒(méi)有一個(gè)元素有定位屬性,最終就參照body進(jìn)行定位。（我一直理解的就是絕對(duì)定位就是你想定哪里定哪里）

定位的時(shí)候：結(jié)合top left right bottom 這四個(gè)方向?qū)傩赃M(jìn)行配合定位。但是要注意：不能同時(shí)選擇left喝right

注意：這里要區(qū)別于相對(duì)定位，在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，原來(lái)的位置就沒(méi)有了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				background-color: salmon;
				width: 100px;
				height: 100px;
				position: absolute;
				left: 100px;
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			我是box1，我采用了絕對(duì)定位
		</div>
		
	</body>
</html>

相對(duì)定位

position: relative;

相對(duì)定位是相對(duì)于元素在文檔中的初始位置——首先它出現(xiàn)在它所在的位置上（即不設(shè)置position時(shí)的位置，然后通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的原始起點(diǎn)進(jìn)行移動(dòng)；

注意，在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，原來(lái)的位置始終保留著。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: brown;
				position: relative;
				left: 300px;
				top: 300px;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		
		<div id="box1">
			
		</div>
		
		<div id="box2">
			
		</div>
		
	</body>
</html>

絕對(duì)定位和相對(duì)定位的區(qū)別

相對(duì)定位的參照物是參照物本身。
絕對(duì)定位的參照物就是父級(jí)元素，當(dāng)父級(jí)元素中不存在相對(duì)定位，那么它的參照物就是body
相對(duì)定位，設(shè)置后，原來(lái)的位置始終保留著
絕對(duì)定位，設(shè)置后，原來(lái)的位置會(huì)被后面的內(nèi)容占據(jù)

原文鏈接：https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741

作者：我一個(gè)超級(jí)無(wú)敵可愛(ài)的人鴨

出處：CSDN

計(jì)算機(jī)科學(xué)中，路徑是指向文件系統(tǒng)中某個(gè)位置的字符串。路徑可以是絕對(duì)的也可以是相對(duì)的。這篇文章將詳細(xì)解釋絕對(duì)路徑和相對(duì)路徑的區(qū)別，并通過(guò)例子來(lái)展示它們的使用。

絕對(duì)路徑（Absolute Paths）

絕對(duì)路徑是從文件系統(tǒng)的根目錄（在Windows系統(tǒng)中是驅(qū)動(dòng)器的根，如C:\，在UNIX系統(tǒng)中是/）開(kāi)始的完整路徑。它包含了從根目錄到目標(biāo)文件或文件夾的所有目錄名，并以文件或文件夾名結(jié)束。

特點(diǎn)

不依賴(lài)于當(dāng)前工作目錄。
通常較長(zhǎng)，因?yàn)樗鼈儼送暾穆窂叫畔ⅰ?/li>
在任何時(shí)候都指向同一個(gè)文件或文件夾，不會(huì)因?yàn)楫?dāng)前位置的變化而改變。

使用實(shí)例

假設(shè)我們有一個(gè)位于Windows系統(tǒng)D盤(pán)的圖片文件，其路徑可能是：

D:\Photos\Holiday\beach.jpg

在UNIX系統(tǒng)中，如果有一個(gè)配置文件位于根目錄下的etc文件夾中，其路徑可能是：

/etc/nginx/nginx.conf

無(wú)論當(dāng)前位置在哪里，上述路徑都準(zhǔn)確指向了特定的文件。

相對(duì)路徑（Relative Paths）

相對(duì)路徑是相對(duì)于當(dāng)前工作目錄的路徑。它不是從根目錄開(kāi)始，而是從當(dāng)前目錄開(kāi)始描述如何到達(dá)目標(biāo)文件或文件夾。

特點(diǎn)

依賴(lài)于當(dāng)前工作目錄。
通常較短，因?yàn)樗鼈儍H包含從當(dāng)前目錄到目標(biāo)位置的路徑信息。
可能會(huì)因?yàn)楫?dāng)前位置的變化而代表不同的文件或文件夾。

使用實(shí)例

假設(shè)當(dāng)前工作目錄是D:\Photos，要引用Holiday文件夾中的beach.jpg圖片，相對(duì)路徑將是：

Holiday\beach.jpg

如果需要引用同一級(jí)別目錄下的另一個(gè)文件夾中的文件，例如當(dāng)前工作目錄是D:\Photos\Holiday，要引用Work文件夾中的report.docx文件，相對(duì)路徑將使用..來(lái)表示上一級(jí)目錄：

..\Work\report.docx

在UNIX系統(tǒng)中，如果當(dāng)前工作目錄是/etc/nginx，要引用同一級(jí)別的apache2目錄下的apache2.conf文件，相對(duì)路徑將是：

../apache2/apache2.conf

特殊符號(hào)

在相對(duì)路徑中，有兩個(gè)特殊符號(hào)經(jīng)常使用：

.（點(diǎn)）：表示當(dāng)前目錄。
..（兩個(gè)點(diǎn)）：表示上一級(jí)目錄。

使用這些符號(hào)，可以在文件系統(tǒng)中向上或向下導(dǎo)航。

在網(wǎng)頁(yè)中使用絕對(duì)路徑和相對(duì)路徑

在創(chuàng)建網(wǎng)頁(yè)時(shí)，鏈接到CSS文件、JavaScript文件、圖片或其他網(wǎng)頁(yè)通常需要使用路徑。使用絕對(duì)路徑或相對(duì)路徑取決于資源的位置和你的特定需求。

HTML中的例子

假設(shè)網(wǎng)站的根目錄結(jié)構(gòu)如下：

/ (根目錄)
|-- index.html
|-- about.html
|-- css
|   |-- styles.css
|-- images
|   |-- logo.png
|-- js
    |-- scripts.js

如果在index.html中引用styles.css，相對(duì)路徑將是：

<link rel="stylesheet" type="text/css" href="css/styles.css">

如果在index.html中引用logo.png，相對(duì)路徑將是：

<img src="images/logo.png" alt="Logo">

如果網(wǎng)站的URL是http://www.example.com，那么引用logo.png的絕對(duì)路徑將是：

<img src="http://www.example.com/images/logo.png" alt="Logo">

結(jié)論

絕對(duì)路徑和相對(duì)路徑都是定位文件系統(tǒng)中文件和文件夾的有效方式。絕對(duì)路徑提供了明確的位置，不依賴(lài)于當(dāng)前工作目錄，而相對(duì)路徑則更加靈活，可以簡(jiǎn)化文件的鏈接，尤其是在網(wǎng)頁(yè)設(shè)計(jì)和軟件開(kāi)發(fā)中。理解這兩種路徑的差異和應(yīng)用場(chǎng)景，對(duì)于任何與文件系統(tǒng)交互的活動(dòng)都是至關(guān)重要的。

在線(xiàn)咨詢(xún)

上一篇：HTML行內(nèi)元素與塊級(jí)元素有哪些及區(qū)別？
下一篇：移動(dòng)端 Vue 數(shù)字密碼鍵盤(pán)組件Numeric-Keyboard

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS：絕對(duì)定位、相對(duì)定位、固定定位

對(duì)定位

相對(duì)定位

固定定位

絕對(duì)定位（absolute）代碼案例：

定定位

絕對(duì)定位和相對(duì)定位

子絕父相

絕對(duì)定位

相對(duì)定位

絕對(duì)定位和相對(duì)定位的區(qū)別

絕對(duì)路徑（Absolute Paths）

特點(diǎn)

使用實(shí)例

相對(duì)路徑（Relative Paths）

特點(diǎn)

使用實(shí)例

特殊符號(hào)

在網(wǎng)頁(yè)中使用絕對(duì)路徑和相對(duì)路徑

HTML中的例子

結(jié)論

您的項(xiàng)目需求