整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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
次我們來說一下，HTML網頁中的定位，有很多小伙伴一定好奇，為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中，我們的各種樣式，標簽，圖片等東西都是出現在網頁的各個位置，網頁看起來很美觀，各種盒模型擺放合理，這是因為在HTML中有定位的能力，今天我們就來學習一下。
position在英語中是位置的意思，而在我們CSS代碼中position也是跟位置有關的，position有三個屬性值分別為relative（相對定位：相對于自己原來的位置進行定位，但保留自己原來的位置，別的元素無法占用），absolute（絕對定位：相對于有定位的父級進行定位，如果沒有則相對于文檔進行定位，定位會脫離文檔，不保留原來的位置，會和原來的文檔不在一個層），fixed（位置定位：他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告，他也會脫離文檔流）。
我們說完了position，接下來我們就說說他是怎么進行定位的，我們有left，top，right，bottom，五個屬性分別對應 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個方向前都加了個距字，我們所做的定位是距各個方向的距離而不是移動，例：left:200px，是向右移動200像素，他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對于底部定位的話就很困難。
我們來通過代碼和結果來看一下：
沒有定位的樣式
加了relative
加了relative的結果
上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]
我們可以看出貓圖片并沒有移動，而是給兔子圖片留著位置。
加了absolute
加了absolute的結果
這個結果我們可以看出貓圖片向前移動了，并沒有保留兔子圖片原來的位置
加了fixed
代碼中的<br>是為了使滑輪可以滑動，以便更好的展示效果。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代碼樣式只對兔子圖片起作用，我沒有給貓添加任何樣式，貓圖片只是作為參照物。
計算機科學中，路徑是指向文件系統中某個位置的字符串。路徑可以是絕對的也可以是相對的。這篇文章將詳細解釋絕對路徑和相對路徑的區別，并通過例子來展示它們的使用。
絕對路徑是從文件系統的根目錄（在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小時內與您取得聯系。
