整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
position:
absolute
特性：
1、脫離文檔流，定位元素占據的位置會釋放
2、原點計算：如果該元素做了定位，那么就去找它做了定位的父元素（找最近的）作為原點基準，如果父元素都沒做定位，則以瀏覽器(0,0)作為原點基準。
3、對內嵌元素定位后，設置寬高屬性就會有效果
應用場景：
一般情況下，絕對定位用在下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等場景
position:
relative
1、不脫離文檔流，定位元素占據的位置不會被釋放/
2、原點計算：以父級元素作為原點基準，若沒有父級元素則以瀏覽器(0,0)為基準。
一般的應用：父相子絕
3、父元素為相對定位，子元素為絕對定位，文檔元素不會受影響。
4、父元素提供相對定位后，子元素以父元素為基準來進行定位。
應用場景：
相對定位一般情況下很少自己單獨使用，都是配合絕對定位使用，為絕對定位創造定位父級而又不設置偏移量
position:
fixed
1、脫離了文檔流
2、原點計算：以瀏覽器(0,0)作為原點基準，盡管父元素做了定位也不會影響它的原點
基準。
應用場景：
一般在網頁中被用在窗口左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等
注意：使用定位后會激活如下5個屬性
left | right | top | bottom | z-index
z-index
改變定位后的疊放順序
取值范圍：-1~9999
其他：
設置網頁元素的透明度
opacity: 0~1;
filter: opacity(0.2) | contrast(0.2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對定位</title>
<style type="text/css">
/*絕對定位：
*1、脫離文檔流，做了定位后它占據的位置會釋放。
*2、原點計算：如果該元素做了定位，那么就去找它做了定位的父元素（最近）作為原點基準，若果父元素
* 都沒做定位，則以瀏覽器(0,0)作為原點基準。
*3、對內嵌元素做了定位后，它的寬度高度屬性就會有效。
*/
*{
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;
/*絕對定位*/
position: absolute;
/*激活4個屬性*/
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;用我自己的話來說，就是讓你想要固定的東西固定。例如：
<!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日，昆凌在社交平臺曬出自己蕩秋千的美照。
照片中，昆凌長發披肩，頭戴假日風草帽，
穿一襲白裙在海邊蕩著秋千，回眸甜笑，宛若仙子。
<div id="box1">
<img src="img/kunling.jpg" class="photo">
</div>
</body>
</html>
對了，在這里說一下，我目前是在職web前端開發，如果你現在正在學習前端，了解前端，渴望成為一名合格的web前端開發工程師，在入門學習前端的過程當中有遇見任何關于學習方法，學習路線，學習效率等方面的問題，都可以隨時關注并私信我：前端，我都會根據大家的問題給出針對性的建議，缺乏基礎入門的視頻教程也可以直接來找我，我這邊有最新的web前端基礎精講視頻教程， 還有我做web前端技術這段時間整理的一些學習手冊，面試題，開發工具，PDF文檔書籍教程，都可以直接分享給大家。
當我下拉時，圖片的位置是不會動的。即使下滑到了最底部，圖片的位置也是固定的。對比下面這張圖：
子絕父相就是指子元素設置絕對定位，而父元素設置相對定位。換句話說：如果要對一個子元素使用定位的話，讓子元素（絕對定位）以其父元素（相對定位）為標準來定位。
實操代碼理解
<!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這個容器設置了相對定位之后，son1和son2都設置了絕對定位，我們的子類這時其實不是在body中絕對定位（absolute），而是在其父類的范圍中絕對定位（absolute）。
position: absolute;查找定位的參照物方法：
從當前元素開始往上找，直到找到一個具有定位屬性的元素為準，以這個元素為參照進行定位。
如果沒有一個元素有定位屬性,最終就參照body進行定位。（我一直理解的就是絕對定位就是你想定哪里定哪里）
定位的時候：結合top left right bottom 這四個方向屬性進行配合定位。但是要注意：不能同時選擇left喝right
注意：這里要區別于相對定位，在使用相對定位時，無論是否進行移動，原來的位置就沒有了。
<!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，我采用了絕對定位
</div>
</body>
</html>position: relative;相對定位是相對于元素在文檔中的初始位置——首先它出現在它所在的位置上（即不設置position時的位置，然后通過設置垂直或水平位置，讓這個元素“相對于”它的原始起點進行移動；
注意，在使用相對定位時，無論是否進行移動，原來的位置始終保留著。
<!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>原文鏈接：https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741
作者：我一個超級無敵可愛的人鴨
出處：CSDN
計算機科學中，路徑是指向文件系統中某個位置的字符串。路徑可以是絕對的也可以是相對的。這篇文章將詳細解釋絕對路徑和相對路徑的區別，并通過例子來展示它們的使用。
絕對路徑是從文件系統的根目錄（在Windows系統中是驅動器的根，如C:\，在UNIX系統中是/）開始的完整路徑。它包含了從根目錄到目標文件或文件夾的所有目錄名，并以文件或文件夾名結束。
假設我們有一個位于Windows系統D盤的圖片文件，其路徑可能是：
D:\Photos\Holiday\beach.jpg
在UNIX系統中，如果有一個配置文件位于根目錄下的etc文件夾中，其路徑可能是：
/etc/nginx/nginx.conf
無論當前位置在哪里，上述路徑都準確指向了特定的文件。
相對路徑是相對于當前工作目錄的路徑。它不是從根目錄開始，而是從當前目錄開始描述如何到達目標文件或文件夾。
假設當前工作目錄是D:\Photos，要引用Holiday文件夾中的beach.jpg圖片，相對路徑將是：
Holiday\beach.jpg
如果需要引用同一級別目錄下的另一個文件夾中的文件，例如當前工作目錄是D:\Photos\Holiday，要引用Work文件夾中的report.docx文件，相對路徑將使用..來表示上一級目錄：
..\Work\report.docx
在UNIX系統中，如果當前工作目錄是/etc/nginx，要引用同一級別的apache2目錄下的apache2.conf文件，相對路徑將是：
../apache2/apache2.conf
在相對路徑中，有兩個特殊符號經常使用：
使用這些符號，可以在文件系統中向上或向下導航。
在創建網頁時，鏈接到CSS文件、JavaScript文件、圖片或其他網頁通常需要使用路徑。使用絕對路徑或相對路徑取決于資源的位置和你的特定需求。
假設網站的根目錄結構如下：
/ (根目錄)
|-- index.html
|-- about.html
|-- css
| |-- styles.css
|-- images
| |-- logo.png
|-- js
|-- scripts.js
如果在index.html中引用styles.css，相對路徑將是：
<link rel="stylesheet" type="text/css" href="css/styles.css">
如果在index.html中引用logo.png，相對路徑將是：
<img src="images/logo.png" alt="Logo">
如果網站的URL是http://www.example.com，那么引用logo.png的絕對路徑將是：
<img src="http://www.example.com/images/logo.png" alt="Logo">
絕對路徑和相對路徑都是定位文件系統中文件和文件夾的有效方式。絕對路徑提供了明確的位置，不依賴于當前工作目錄，而相對路徑則更加靈活，可以簡化文件的鏈接，尤其是在網頁設計和軟件開發中。理解這兩種路徑的差異和應用場景，對于任何與文件系統交互的活動都是至關重要的。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
