定位布局（Position）------ 精准控制元素位置
第一节：定位布局的核心逻辑
1.1 定位的本质
- 定义 ：position属性让元素脱离文档流（或部分脱离），相对于"参考点"精准定位；
- 定位布局（Position）------ 精准控制元素位置核心要素：
✅ 定位模式（position取值）：决定参考点；
✅ 偏移属性（top/right/bottom/left）：决定元素相对于参考点的位置；
✅ z-index：决定元素的层叠顺序（仅对定位元素生效）。
1.2 定位模式对比表（核心重点）
|--------------|-----------------|-----------|--------|------------------|
| 定位模式 | 参考点 | 是否脱离文档流 | 偏移属性生效 | 应用场景 |
| static（默认） | 无（文档流） | 否 | 否 | 正常布局，无特殊定位需求 |
| relative（相对） | 自身原始位置 | 否（保留原空间） | 是 | 微调元素位置、作为绝对定位的容器 |
| absolute（绝对） | 最近的已定位祖先元素 | 是（不占原空间） | 是 | 弹窗、下拉菜单、精确定位组件 |
| fixed（固定） | 浏览器视口（viewport） | 是（不占原空间） | 是 | 固定导航、回到顶部按钮、悬浮广告 |
| sticky（粘性） | 视口+自身原始位置 | 滚动前否，滚动后是 | 是 | 吸顶导航、侧边栏目录 |
第二节：5种定位模式实战
2.1 相对定位（relative）------ "微调神器"
- 核心特点：
✅ 参考点：元素自己在文档流中的原始位置；
✅ 偏移后仍保留原始空间，不影响其他元素；
- 实操练习3：按钮hover时向右上偏移2px（交互优化）
|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <button class="btn">提交按钮</button> <style> .btn { padding: 8px 20px; border: none; background-color: #2196f3; color: #fff; border-radius: 4px; cursor: pointer; position: relative; /* 相对定位 */ transition: all 0.2s ease; } .btn:hover { top: -2px; /* 向上偏移2px */ left: 2px; /* 向右偏移2px */ box-shadow: 0 2px 8px rgba(0,0,0,0.2); } </style> |
2.2 绝对定位（absolute）------ "精准定位核心"
- 核心规则：
✅ 必须配合"已定位的父元素"使用（父元素设为relative），即"父相子绝"；
✅ 脱离文档流，不占据原始空间；
- 实操练习4：弹窗居中（经典场景）
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <div class="modal-mask"> <!-- 遮罩层 --> <div class="modal-content"> <h3>弹窗标题</h3> <p>这是弹窗内容，基于绝对定位实现居中</p> </div> </div> <style> .modal-mask { position: fixed; /* 遮罩层固定全屏 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; /* 也可不用flex，用absolute居中 */ align-items: center; justify-content: center; } .modal-content { position: relative; /* 可选，为子元素定位做准备 */ width: 400px; padding: 20px; background-color: #fff; border-radius: 8px; /* 若不用flex，用以下代码居中： position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */ } </style> |
2.3 固定定位（fixed）------ "视口绑定"
- 核心特点：参考点是浏览器视口，页面滚动时位置不变；
- 实操练习5：回到顶部按钮
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <a href="#" class="back-to-top">↑</a> <div class="long-content"> <!-- 重复多行文本，模拟长页面 --> <p>页面内容...</p><p>页面内容...</p><p>页面内容...</p> <p>页面内容...</p><p>页面内容...</p><p>页面内容...</p> </div> <style> .back-to-top { position: fixed; /* 固定定位 */ bottom: 30px; /* 距离视口底部30px */ right: 30px; /* 距离视口右侧30px */ width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: #2196f3; color: #fff; border-radius: 50%; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .long-content { height: 2000px; /* 模拟长页面 */ } </style> |
性定位（sticky）------ "滚动吸顶"
- 核心特点：滚动前遵循文档流，滚动到指定位置后变为固定定位；
- 实操练习6：吸顶导航栏
|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <div class="header">页面头部</div> <nav class="sticky-nav"> <a href="#">首页</a> <a href="#">课程</a> <a href="#">关于</a> </nav> <div class="content"> <p>滚动页面，导航栏会吸顶...</p> <!-- 重复多行文本 --> </div> <style> .header { height: 100px; background-color: #e3f2fd; line-height: 100px; text-align: center; } .sticky-nav { position: sticky; /* 粘性定位 */ top: 0; /* 滚动到顶部时固定 */ background-color: #2196f3; padding: 10px 0; text-align: center; z-index: 999; /* 防止被遮挡 */ } .sticky-nav a { color: #fff; margin: 0 10px; text-decoration: none; } .content { height: 1500px; padding: 20px; } </style> |
第二节：定位布局的层叠顺序（z-index）
- 核心规则：
✅ 仅对定位元素（relative/absolute/fixed/sticky）生效；
✅ 值越大，元素越在顶层（默认auto，等价于0）；
✅ 同层级下，后渲染的元素覆盖先渲染的；
- 实操练习7：解决弹窗被遮罩层遮挡的问题
|-----------------------------------------------------------------------------------------------------------------------------------------------------|
| CSS .modal-mask { z-index: 1000; } /* 遮罩层层级 */ .modal-content { z-index: 1001; } /* 弹窗层级更高 */ .back-to-top { z-index: 999; } /* 回到顶部按钮层级更低 */ |
第三节：课堂练习与答疑
- 用"父相子绝"实现商品卡片的"新品标签"（右上角角标）；
- 用fixed实现顶部固定导航栏，下方内容不被遮挡；
- 答疑：解决"绝对定位元素偏移异常""z-index不生效"等问题。