本系列可作為前端學習系列的筆記，代碼的運行環境是在HBuilder中，小編會將代碼復制下來，大家復制下來就可以練習了，方便大家學習。
HTML系列文章?已經收錄在前端專欄，有需要的寶寶們可以點擊前端專欄查看！
點贊關注不迷路！您的點贊、關注和收藏是對小編最大的支持和鼓勵！
系列文章目錄
CSS- 1.1 css選擇器
CSS- 2.1 實戰之圖文混排、表格、表單、學校官網一級導航欄
CSS- 3.1 盒子模型-塊級元素、行內元素、行內塊級元素和display屬性
CSS- 4.1 浮動（Float）
CSS- 4.2 相對定位（position: relative）
CSS- 4.3 絕對定位（position: absolute）&學校官網導航欄實例
CSS- 4.4 固定定位（fixed）& 咖啡售賣官網實例
CSS- 4.5 css + div 布局 & 簡易網易云音樂 官網布置實例?
CSS- 4.6 radiu、shadow、animation動畫
CSS- 5.1 Transition 過渡??
目錄
系列文章目錄
前言
一、理論部分
1.基本概念
2.語法
3.特點詳解
4.實際應用場景
（1） 微調元素位置
（2）作為絕對定位的參考點
（3）創建視覺效果而不破壞布局
5.與其他定位方式的比較
6.注意事項
7.最佳實踐
二、代碼實例
總結
前言
小編作為新晉碼農一枚，會定期整理一些寫的比較好的代碼，作為自己的學習筆記，會試著做一下批注和補充，如轉載或者參考他人文獻會標明出處，非商用，如有侵權會刪改！歡迎大家斧正和討論！
一、理論部分
相對定位（position: relative）是CSS定位屬性中的一種，它允許元素相對于其正常文檔流中的位置進行偏移，同時保留其在文檔流中的原始空間。
1.基本概念
相對定位的元素會：
- 保留原始空間：元素在文檔流中仍然占據原來的位置
- 相對于自身偏移：通過
top、right、bottom、left屬性相對于其正常位置進行偏移 - 不影響其他元素：其他元素會像該元素仍在原位置一樣進行布局
2.語法
css
.element {position: relative;top: 10px; /* 向下偏移10像素 */left: 20px; /* 向右偏移20像素 *//* 或使用其他方向 *//* right: 10px; *//* bottom: 10px; */
}3.特點詳解
-
空間保留
相對定位的元素在文檔流中仍然占據其原始位置，只是視覺上看起來移動了。其他元素不會填補它"離開"的空間。 -
偏移基準
偏移是相對于元素在正常文檔流中的位置計算的，而不是相對于父元素或其他元素。 -
層級提升
相對定位的元素會創建一個新的層疊上下文（stacking context），但不會脫離文檔流。
4.實際應用場景
（1） 微調元素位置
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.box {width: 100px;height: 100px;background: lightblue;margin: 10px;}.relative-box {position: relative;top: 20px;left: 30px;background: lightcoral;}</style></head><body><div class="box">原始位置</div><div class="box relative-box">相對定位</div></body>
</html>
效果：第二個div會向下偏移20px，向右偏移30px，但第一個div不會移動填補這個空間。
（2）作為絕對定位的參考點
相對定位常被用作絕對定位子元素的參考容器：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.parent {position: relative;width: 300px;height: 200px;background: #eee;}.child {position: absolute;top: 10px;right: 10px;background: #ff0;}</style></head><body><div class="parent"><div class="child">絕對定位的子元素</div></div></body>
</html>
在這個例子中，子元素的絕對定位是相對于其相對定位的父元素計算的。
（3）創建視覺效果而不破壞布局
相對定位可以用于創建懸停效果、工具提示等，而不影響頁面其他部分的布局。
5.與其他定位方式的比較
| 定位方式 | 是否脫離文檔流 | 偏移基準 | 是否影響其他元素 |
|---|---|---|---|
| 靜態定位(static) | 否 | 無 | 否 |
| 相對定位(relative) | 否 | 元素自身原始位置 | 否 |
| 絕對定位(absolute) | 是 | 最近的已定位祖先元素 | 是 |
| 固定定位(fixed) | 是 | 視口 | 是 |
| 粘性定位(sticky) | 混合 | 視口或最近的滾動祖先 | 否（通常） |
6.注意事項
- 性能考慮：相對定位的元素仍然參與文檔流計算，大量使用可能影響渲染性能
- 層疊順序：相對定位的元素會覆蓋靜態定位的元素（除非設置z-index）
- 響應式設計：在響應式布局中，相對定位可能需要配合媒體查詢調整偏移值
- 可訪問性：過度使用定位可能影響屏幕閱讀器的用戶體驗
7.最佳實踐
- 用于微調元素位置而非主要布局
- 作為絕對定位元素的定位上下文容器
- 避免在需要精確控制的響應式布局中過度使用
- 結合transform屬性（如
translate()）可能比使用top/left更高效
相對定位是CSS定位系統中一個靈活而強大的工具，特別適合需要微調元素位置而不破壞整體布局的場景。
二、代碼實例
代碼實例如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定位-相對定位relative</title><style type="text/css">.div1 {width: 100px;height: 100px;background-color: red;}.div2 {width: 100px;height: 100px;background-color: blue;position: relative;/* 以原來的位置為基準發生偏移 */left: 100px;top: -50px;}.div3 {width: 100px;height: 100px;background-color: green;}#btn {position: relative;top: 2px;}</style></head><body><div class="father"><div class="div1"></div><div class="div2"></div><div class="div3"></div><input type="" name="" id="btn" value="" /></div><a href="../個人主題網站/index.html"><h3 align="center">返回首頁</h3></a></body>
</html>代碼運行：
總結
以上就是今天要講的內容，本文簡單記錄了CSS之相對定位，僅作為一份簡單的筆記使用，大家根據注釋理解
![[Vue]跨組件傳值](http://pic.xiahunao.cn/[Vue]跨組件傳值)
