小白也能秒懂！CSS三种定位方式，看完就能上手写
一、3种定位，一句话讲懂
1. 相对定位 position: relative：只挪自己，不影响别人
用法：给元素加 position: relative;
特点：视觉上元素移走了，但它原来占的位置不会空着，别的元素不会挤过来
2. 绝对定位 position: absolute：找个爹，精准卡位
用法：给元素加 position: absolute;
特点：完全脱离原来的排版，原来占的位置直接消失，别的元素会补上来
3. 固定定位 position: fixed：钉在屏幕上，滚哪都不动
用法：给元素加 position: fixed;
特点：永远待在屏幕的固定位置，和页面滚动没关系
二、一张表，记住3种定位的区别
定位方式 | 参照物 | 原来的位置还在吗？ | 页面滚动时动吗？ |
| 相对定位 | 自己原来的位置 | ✅ 保留 | 跟着页面一起滚 |
| 绝对定位 | 最近的已定位父元素 | ❌ 不保留 | 跟着页面一起滚 |
| 固定定位 | 浏览器窗口 | ❌ 不保留 | 纹丝不动 |
总结：
1. 想微调元素位置，又不打乱页面排版 → 用相对定位
2. 想把元素放在另一个元素的角落 → 用「相对定位当容器 + 绝对定位放元素」
3. 想让元素一直钉在屏幕上 → 用固定定位
三、与3种定位方式搭配使用的4个偏移属性
一张表让你看懂怎么挪位置
| 偏移属性 | 作用 | 正负值规则 |
| top | 控制元素垂直方向的位置 | 正值：元素向下移动； 负值：元素向上移动 |
| bottom | 控制元素垂直方向的位置 | 正值：元素向上移动； 负值：元素向下移动 |
| left | 控制元素水平方向的位置 | 正值：元素向右移动； 负值：元素向左移动 |
| right | 控制元素水平方向的位置 | 正值：元素向左移动； 负值：元素向右移动 |
想往哪里挪，就用对应的属性。
最后我们来看一个示例代码吧
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位综合练习</title> <style> /* 练习题目：使用三种定位方式完成以下布局 1. 红色卡片：使用相对定位作为容器 2. 蓝色标签：使用绝对定位放在红色卡片右上角 3. 绿色返回按钮：使用固定定位固定在页面右下角 */ body { padding: 50px; } /* ========== 题目要求：完成下面红色卡片的样式 ========== */ .card { width: 300px; height: 200px; background-color: #ff6b6b; border-radius: 10px; padding: 20px; color: white; font-size: 18px; margin-bottom: 600px; /* 留出滚动空间 */ position: relative; /* 提示：使用相对定位 */ } /* ========== 题目要求：完成下面蓝色标签的样式 ========== */ .tag { width: 80px; height: 30px; background-color: #4dabf7; border-radius: 5px; font-size: 14px; text-align: center; line-height: 30px; position: absolute; top: -5px; right: -5px; /* 提示：使用绝对定位，相对于card定位 */ } /* ========== 题目要求：完成下面返回按钮的样式 ========== */ .back-btn { width: 50px; height: 50px; background-color: #51cf66; border-radius: 50%; text-align: center; line-height: 50px; color: white; font-weight: bold; cursor: pointer; position: fixed; bottom: 30px; right: 30px; /* 提示：使用固定定位 */ } </style> </head> <body> <!-- 练习题目说明 --> <h2>定位综合练习 - 请完成三个盒子的样式</h2> <p>请根据CSS注释中的提示，填写正确的定位属性和偏移值</p> <hr> <!-- 红色卡片容器 - 需要添加相对定位 --> <div class="card"> 这是卡片内容 <br>请为我添加相对定位 <!-- 蓝色标签 - 需要添加绝对定位，放到右上角 --> <div class="tag">标签</div> </div> <!-- 绿色返回按钮 - 需要添加固定定位，固定在右下角 --> <div class="back-btn">↑</div> <p>（下方内容用于测试固定定位的滚动效果）</p> <div style="height: 500px; background: #f0f0f0; padding: 20px;"> 滚动页面查看绿色按钮是否保持在右下角固定位置... </div> </body> </html>运行结果如下：
屏幕录制 2026-05-24 211424