1. 相对定位（position: relative）
偏移后元素会 “飘起来”，但原来的位置会被保留，其他元素不会占用这个空位。
它最核心的用法：给子元素 absolute 定位提供参照物（父元素设置 relative，子元素设置 absolute，子元素就会相对于父元素定位）。
2. 绝对定位（position: absolute）
一旦设置，元素会脱离文档流，后面的元素会直接顶上来占据它原来的位置。
定位规则：找最近的、设置了 relative/absolute/fixed 的父级元素；如果所有父级都没设置，就相对于整个文档（body）定位。
3. 固定定位（position: fixed）
元素会固定在浏览器视窗的某个位置，不会随页面滚动而移动。
常见场景：顶部固定导航、右下角 “回到顶部” 按钮、页面居中弹窗。
4.代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 定位三大方式演示</title>
<style>
.box {
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
color: #fff;
font-size: 18px;
}
.red { background-color: #e74c3c; }
.green { background-color: #2ecc71; }
.blue { background-color: #3498db; }
.orange { background-color: #f39c12; }
.demo-normal {
margin-bottom: 50px;
border: 2px solid #333;
padding: 10px;
}
.demo-relative {
margin-bottom: 50px;
border: 2px solid #333;
padding: 10px;
}
.box-relative {
position: relative;
top: 20px;
left: 30px;
}
.demo-absolute {
margin-bottom: 50px;
border: 2px solid #333;
padding: 10px;
height: 200px;
position: relative;
}
.box-absolute {
position: absolute;
top: 20px;
right: 30px;
}
.demo-fixed {
height: 1000px;
border: 2px solid #333;
padding: 10px;
}
.box-fixed {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
}
</style>
</head>
<body>
<h3>1. 文档流默认效果（元素从上到下依次排列）</h3>
<div class="demo-normal">
<div class="box red">盒子1</div>
<div class="box green">盒子2</div>
<div class="box blue">盒子3</div>
</div>
<h3>2. 相对定位（原位置保留，仅元素自身偏移）</h3>
<div class="demo-relative">
<div class="box red">盒子1</div>
<div class="box green box-relative">相对定位盒子2</div>
<div class="box blue">盒子3</div>
</div>
<h3>3. 绝对定位（脱离文档流，父级开启相对定位作为参照物）</h3>
<div class="demo-absolute">
<div class="box red">盒子1</div>
<div class="box green box-absolute">绝对定位盒子2</div>
<div class="box blue">盒子3（会被顶上去）</div>
</div>
<h3>4. 固定定位（相对于浏览器窗口固定）</h3>
<div class="demo-fixed">
<div class="box red">盒子1</div>
<div class="box green">盒子2</div>
<div class="box blue">盒子3</div>
<div class="box orange box-fixed">固定按钮</div>
<p>滚动页面，右下角的“固定按钮”位置不会变化</p>
</div>
</body>
</html>
5.结果
6.补充小知识
定位属性配合 top / right / bottom / left 偏移属性使用，才能让元素产生位置变化。
层级控制：定位元素可以用 z-index 控制堆叠顺序，值越大越靠上（只对设置了非 static 定位的元素生效）。
