CSS 定位
03-css2026/11/14
CSS position 用于控制元素在页面中的 位置定位方式。
CSS 中有 5 种定位方式：
static（默认）relative（相对定位）absolute（绝对定位）fixed（固定定位）sticky（粘性定位）
五种定位方式详解
1. static - 静态定位（默认值）
元素遵循正常的文档流，忽略 top, right, bottom, left, z-index 属性。
特点：
- 元素在正常流中定位
- 不能使用偏移属性
- 不能使用
z-index
.box {
position: static; /* 默认值，可以不写 */
top: 100px; /* 无效！ */
left: 50px; /* 无效！ */
}
2. relative - 相对定位
元素相对于自身原本的位置进行偏移。
特点：
- 相对于自身原位置偏移
- 原位置仍被保留，不影响其他元素布局
- 可以使用
z-index
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2 - 相对定位</div>
<div class="box box3">Box 3</div>
</div>
.box {
width: 100px;
height: 60px;
background: lightblue;
margin: 10px;
}
.box2 {
position: relative;
top: 20px; /* 从原位置向下移动20px */
left: 30px; /* 从原位置向右移动30px */
background: lightcoral;
}
3. absolute - 绝对定位
元素相对于最近的已定位祖先元素（非 static）进行定位，如果没有，则相对于初始包含块（通常是 <html>）。
特点：
- 脱离正常文档流，不占据空间
- 相对于最近的定位祖先元素
- 如果没有定位祖先，相对于
<html> - 可以使用
z-index
<div class="container" style="position: relative;">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2 - 绝对定位</div>
<div class="box box3">Box 3</div>
</div>
.container {
position: relative; /* 定位上下文 */
width: 300px;
height: 200px;
border: 2px solid #333;
background: #f0f0f0;
}
.box {
width: 80px;
height: 40px;
background: lightblue;
}
.box2 {
position: absolute;
top: 20px; /* 距离容器顶部20px */
right: 30px; /* 距离容器右侧30px */
background: lightcoral;
}
4. fixed - 固定定位
元素相对于浏览器视口进行定位，即使页面滚动也不会移动。
特点：
- 相对于浏览器视口定位
- 滚动页面时元素位置固定
- 脱离正常文档流
- 常用于导航栏、悬浮按钮