CSS定位實(shí)操代碼掌握固定定位、絕對(duì)定位與相對(duì)定位子絕父相

定定位

position:fixed;

用我自己的話來說，就是讓你想要固定的東西固定。例如：

<!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)曬出自己蕩秋千的美照。
		照片中，昆凌長發(fā)披肩，頭戴假日風(fēng)草帽，
		穿一襲白裙在海邊蕩著秋千，回眸甜笑，宛若仙子。
		<div id="box1">
			<img src="img/kunling.jpg" class="photo">
		</div>
		
	</body>
</html>

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

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

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

子絕父相

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

實(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ì)定位，我們的子類這時(shí)其實(shí)不是在body中絕對(duì)定位（absolute），而是在其父類的范圍中絕對(duì)定位（absolute）。

絕對(duì)定位

position: absolute;

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

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

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

<!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í)的位置，然后通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的原始起點(diǎn)進(jìn)行移動(dòng)；

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

<!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è)置后，原來的位置始終保留著
絕對(duì)定位，設(shè)置后，原來的位置會(huì)被后面的內(nèi)容占據(jù)

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

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

出處：CSDN

次我們來說一下，HTML網(wǎng)頁中的定位，有很多小伙伴一定好奇，為什么我們寫的代碼都是按順序羅列的而在網(wǎng)頁的展示效果中，我們的各種樣式，標(biāo)簽，圖片等東西都是出現(xiàn)在網(wǎng)頁的各個(gè)位置，網(wǎng)頁看起來很美觀，各種盒模型擺放合理，這是因?yàn)樵贖TML中有定位的能力，今天我們就來學(xué)習(xí)一下。

position在英語中是位置的意思，而在我們CSS代碼中position也是跟位置有關(guān)的，position有三個(gè)屬性值分別為relative（相對(duì)定位：相對(duì)于自己原來的位置進(jìn)行定位，但保留自己原來的位置，別的元素?zé)o法占用），absolute（絕對(duì)定位：相對(duì)于有定位的父級(jí)進(jìn)行定位，如果沒有則相對(duì)于文檔進(jìn)行定位，定位會(huì)脫離文檔，不保留原來的位置，會(huì)和原來的文檔不在一個(gè)層），fixed（位置定位：他的位置不會(huì)隨著滑輪的滾動(dòng)而改變較常見于彈窗廣告，他也會(huì)脫離文檔流）。

我們說完了position，接下來我們就說說他是怎么進(jìn)行定位的，我們有l(wèi)eft，top，right，bottom，五個(gè)屬性分別對(duì)應(yīng) 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個(gè)方向前都加了個(gè)距字，我們所做的定位是距各個(gè)方向的距離而不是移動(dòng)，例：left:200px，是向右移動(dòng)200像素，他的意思是距離左邊增加200像素。在我們實(shí)際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對(duì)于底部定位的話就很困難。

我們來通過代碼和結(jié)果來看一下：

沒有定位的樣式

加了relative

加了relative的結(jié)果

上面這個(gè)結(jié)果圖看著比例不太對(duì)是因?yàn)樽髡呓貓D沒截好[捂臉]

我們可以看出貓圖片并沒有移動(dòng)，而是給兔子圖片留著位置。

加了absolute

加了absolute的結(jié)果

這個(gè)結(jié)果我們可以看出貓圖片向前移動(dòng)了，并沒有保留兔子圖片原來的位置

加了fixed

代碼中的<br>是為了使滑輪可以滑動(dòng)，以便更好的展示效果。

用了fixed的效果展示。

以上的代碼樣式只對(duì)兔子圖片起作用，我沒有給貓?zhí)砑尤魏螛邮?，貓圖片只是作為參照物。

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

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

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

特點(diǎn)

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

使用實(shí)例

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

D:\Photos\Holiday\beach.jpg

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

/etc/nginx/nginx.conf

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

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

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

特點(diǎn)

依賴于當(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ì)路徑將使用..來表示上一級(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)頁中使用絕對(duì)路徑和相對(duì)路徑

在創(chuàng)建網(wǎng)頁時(shí)，鏈接到CSS文件、JavaScript文件、圖片或其他網(wǎng)頁通常需要使用路徑。使用絕對(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ì)路徑提供了明確的位置，不依賴于當(dāng)前工作目錄，而相對(duì)路徑則更加靈活，可以簡化文件的鏈接，尤其是在網(wǎng)頁設(shè)計(jì)和軟件開發(fā)中。理解這兩種路徑的差異和應(yīng)用場景，對(duì)于任何與文件系統(tǒng)交互的活動(dòng)都是至關(guān)重要的。

在線咨詢

上一篇：HTML5受歡迎的原因有哪些？總共5點(diǎn)
下一篇：把HTML轉(zhuǎn)成PDF的4個(gè)方案及實(shí)現(xiàn)方法

您的項(xiàng)目需求

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

整合營銷服務(wù)商

CSS定位 實(shí)操代碼掌握固定定位、絕對(duì)定位與相對(duì)定位子絕父相

定定位

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

子絕父相

絕對(duì)定位

相對(duì)定位

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

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

特點(diǎn)

使用實(shí)例

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

特點(diǎn)

使用實(shí)例

特殊符號(hào)

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

HTML中的例子

結(jié)論

您的項(xiàng)目需求

CSS定位實(shí)操代碼掌握固定定位、絕對(duì)定位與相對(duì)定位子絕父相