在前端入门阶段，我一直有个困惑：
为什么有些布局非得用定位？浮动和标准流不行吗？
学完这一阶段的 CSS（定位 + 显示隐藏）之后，这些问题终于串起来了。这篇文章是我对 CSS 第五天核心内容的一次系统复盘，重点放在：
- 定位到底解决了什么问题
- 四种定位方式的本质区别
- 为什么“子绝父相”是定位的灵魂
- 定位在真实业务中的使用方式（轮播图、遮罩层）
- display / visibility / overflow 的差异和使用场景
如果你和我一样，刚从浮动走向定位，这篇笔记应该能帮你少踩很多坑。
一、为什么一定要学定位？
在正式学定位之前，我尝试过用标准流、浮动去实现下面这些效果：
- 一个元素在盒子内部自由移动，并且可以压住其他元素
- 页面滚动时，某个模块始终固定在屏幕某个位置
结论很明确：
标准流和浮动都做不到，或者说做得非常别扭。
于是，定位的价值就很清楚了：
- 浮动：解决“横向排列”的问题
- 定位：解决“自由移动 + 叠加”的问题
一句话总结：
当你需要一个元素“不老实待着”，那就该用定位了。
二、定位的本质是什么？
CSS 中的定位不是魔法，本质只有一句话：
定位 = 定位模式 + 边偏移
1. 边偏移（top / right / bottom / left）
边偏移用来决定元素“具体去哪儿”。
需要记住的点只有一个：
边偏移必须配合定位模式使用，单独写是无效的。
2. 定位模式（position）
CSS 提供了四种主要定位方式：
- static（静态）
- relative（相对）
- absolute（绝对）
- fixed（固定）
sticky（粘性）属于进阶阶段，这里不作为重点。
三、四种定位方式，一次说清楚
1. static —— 默认状态
- 所有元素的默认定位方式
- 按标准流排列
- 不支持边偏移
一句话：
等于没定位，几乎不用。
2. relative —— 相对定位（重点）
相对定位有两个非常关键的特点：
- 相对于自己原来的位置移动
- 不脱离标准流，仍然占有原位置
这意味着：
- 它不会影响后面的布局
- 它最常见的用途不是“移动自己”，而是——
给绝对定位当爹
3. absolute —— 绝对定位（重点）
绝对定位是定位体系里变化最大的一个。
它的核心特点只有三条：
- 完全脱离标准流（不占位置）
- 如果父元素没有定位
→ 以浏览器（Document）为参照 - 如果父元素有定位
→ 以最近的定位祖先为参照
这也是为什么我们总会听到那句口诀：
子绝父相
含义非常简单：
- 子元素：绝对定位（自由摆放、不占位置）
- 父元素：相对定位（限制范围、占位置）
为什么父元素不能也用绝对定位？
因为父元素如果脱标，
下面的布局会整体塌上来。
一句话总结：
父级要站得住，子级才能随便飞。
4. fixed —— 固定定位（重点）
固定定位可以理解为：
一种只认浏览器窗口的绝对定位
它的特点非常纯粹：
- 参照点永远是浏览器可视区
- 不随滚动条滚动
- 完全脱标，不占位置
典型使用场景：
- 返回顶部按钮
- 固定导航
- 悬浮广告
四、定位方式对比总结
| 定位方式 | 是否脱标 | 参照对象 | 使用场景 |
|---|---|---|---|
| static | 否 | 标准流 | 几乎不用 |
| relative | 否 | 自己原位置 | 给绝对定位当父级 |
| absolute | 是 | 定位的祖先 | 模块叠加、自由摆放 |
| fixed | 是 | 浏览器窗口 | 固定元素 |
学习定位时，只抓两个核心问题：
- 占不占位置
- 相对于谁移动
五、定位的真实应用：淘宝轮播图
轮播图是定位最经典的综合案例。
它几乎集齐了定位的所有知识点：
- 父盒子：相对定位（限制范围）
- 左右按钮：绝对定位（叠加在图片上）
- 小圆点：绝对定位 + 水平居中
- z-index：控制层级关系
这里最大的收获是一个认知转变：
轮播图不是“图片布局”，而是“定位布局”。
一旦你意识到这一点，代码反而会变得很自然。
六、z-index：控制谁在上面
只要用了定位，就几乎一定会遇到层级问题。
关于 z-index，只记住三点：
- 数值越大，越靠上
- 相同数值，后写的覆盖先写的
- 只能作用于定位元素
这也是为什么 z-index 经常和 absolute / fixed 一起出现。
七、显示与隐藏：不只是“看不见”
显示与隐藏是 CSS 中非常容易被低估的一部分。
实际上，它们在交互中非常重要。
1. display: none（最常用）
- 元素完全消失
- 不占位置
典型场景：
- 下拉菜单
- 弹窗
- 遮罩层
2. visibility: hidden（了解）
- 元素不可见
- 仍然占位置
一句话理解：
停职留薪，人没了，工位还在。
3. overflow: hidden（重点）
overflow 并不是严格意义上的“隐藏元素”，
而是：
- 隐藏超出父盒子的部分内容
它在实际开发中有两个高频用途：
- 清除浮动
- 防止内容撑破盒子
需要注意的是：
有定位的元素，慎用 overflow: hidden。
八、综合案例：鼠标经过显示遮罩
这是一个非常“前端”的效果：
- 初始状态：遮罩隐藏
- hover 父盒子：遮罩显示
- 遮罩：绝对定位 + display 切换
这个案例让我真正理解了：
CSS 不是静态的样式，而是可以参与交互的。
九、阶段总结
学完定位和显示隐藏之后，我对 CSS 的理解明显上了一个台阶。
如果用一句话总结这一阶段：
- 标准流：管上下
- 浮动：管左右
- 定位：管自由和叠加
真正的页面布局，
一定是三者配合完成的，而不是单选题。
下一步，我会开始把这些知识真正用到完整页面中，而不是停留在单个案例。
如果你也正在学前端，希望这篇笔记能帮你把“会写”变成“理解”。
