這篇文章為大家帶來了css定位佈局的相關知識，下面我們就來看一下什麼是相對定位、絕對定位以及固定定位不同的元素性質與用途等知識，希望對大家有幫助。
1. 相對定位
1.1) 什麼是相對定位
相對定位：盒子可以依照自己原來的位置進行位置調整(透過位置描述詞實現)。
位置描述：
left: 向右移動；right 向左移動；top 向下移動；bottom 向上移動
（當裡面值為負數的時候，相反方向移動）
舉例：
原來：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 50px auto;
}
p {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;
}
</style></head><body>
<p>
<p></p>
</p></body></html>
將p 設定成相對定位：
p {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;} 
1.2）相對定位的性質與用途
性質
- 相對定位的元素，本質上仍在原來的位置，只不過在新的地方渲染出現，不會對頁面其它元素產生影響。
用途
- 用來微調元素位置
- 相對定位的盒子可以用來做絕對定位的參考盒子
舉個例子：
nbsp;html>
<meta>
<meta>
<meta>
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
nav {
width: 780px;
height: 50px;
margin: 40px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
width: 156px;
height: 50px;
line-height: 50px;
text-align: center;
}
nav ul li a {
display: block;
width: 156px;
height: 50px;
background-color: lightcyan;
color: #000;
text-decoration: none;
}
nav ul li a:hover {
border-top: 3px solid red;
}
</style>
<nav>
<ul>
<li>
<a>导航一</a>
</li>
<li>
<a>导航二</a>
</li>
<li>
<a>导航三</a>
</li>
<li>
<a>导航四</a>
</li>
<li>
<a>导航五</a>
</li>
</ul>
</nav>
這個時候效果是這樣：
會發現滑鼠懸浮在上面的時候，導航那塊區域都會下沉
我們為它設定了相對定位並微調之後：
nav ul li a:hover {
border-top: 3px solid red;
position: relative;
top: -3px;}
這樣就可以解決剛剛的問題了
2. 絕對定位
2.1) 什麼是絕對定位
絕對定位：盒子以座標進行位置描述，擁有自己絕對位置。
絕對定位的參考盒子：
絕對定位的盒子會以自己的祖先元素中，離自己最近的擁有定位屬性的盒子，當做基準點。
這個盒子通常是相對定位的，所以也被稱為 「子絕父相」。
位置描述：
left：到左邊的距離；right：到右邊的距離；top：到上邊的距離；bottom：到下邊的距離
舉例：
nbsp;html>
<meta>
<meta>
<meta>
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
width: 500px;
height: 300px;
left: 200px;
top: 100px;
background-color: antiquewhite;
}
</style>
<p>
</p>
2.2）絕對定位的性質與用途
絕對定位的盒子垂直居中：
.box {
position: absolute;
top: 50%;
margin-top: -自己高度一半;}
絕對定位的盒子水平居中：
.box {
position: absolute;
left: 50%;
margin-left: -自己宽度一半;}
- 堆疊順序z-index 屬性
##設定絕對定位元素的壓疊順序.#舉例：是一個沒有單位的正整數，數值大的能夠壓住數值小的（即數值大的顯示在上層）
nbsp;html>
<meta>
<meta>
<meta>
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
background-color: antiquewhite;
}
.box2 {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 200px;
background-color: lightblue;
}
</style>
<p></p>
<p></p>此時效果如下：<br/>這時候我們想要讓box1顯示在上層，就設定一個z-index 屬性。
.box1 {
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
background-color: antiquewhite;
z-index: 100;}.box2 {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 200px;
background-color: lightblue;
z-index: 1;}看看效果：
- 用途
可以結合CSS 精靈使用
可以結合JS 實現一些動畫
位置描述： left：到左邊的距離；right：到右邊的距離；top：到上邊的距離；bottom：到下邊的距離
.box {
position: fixed;
top: 100px;
left: 100px;} 3.2）固定定位的性質與用途可以用來實現一些元素要一直浮現在當前視窗前，例如瀏覽一個頁面時的返回頂部按鈕，會一直出現在當前頁面的某個位置舉例：<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 50%;
background-color: rgba(78, 209, 226, 0.5);
cursor: pointer;
font-size: 24px;
}
</style></head><body>
<a class="box">^</a>
<p>
<img src="/static/imghwm/default1.png" data-src="https://dummyimage.com/600x400/00bcd4/fff" class="lazy" alt="">
</p>
<p>
<img src="/static/imghwm/default1.png" data-src="https://dummyimage.com/600x400/00bcd4/fff" class="lazy" alt="">
</p>
<p>
<img src="/static/imghwm/default1.png" data-src="https://dummyimage.com/600x400/00bcd4/fff" class="lazy" alt="">
</p></body></html>效果如下： 當頁面到下方時，右下角回到頂部的按鈕位置不變。 
css影片教學。
以上是深入淺析了解CSS中定位佈局的細節的詳細內容。更多資訊請關注PHP中文網其他相關文章！
如何使用HTML，CSS和JavaScript創建動畫倒計時計時器Apr 11, 2025 am 11:29 AM您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
WebStorm Mac版
好用的JavaScript開發工具
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
Atom編輯器mac版下載
最受歡迎的的開源編輯器
