CSS: CSS 定位
定位（position）让你能够精确控制元素在页面中的位置。CSS 提供了五种定位方式，每种都有自己的规则和用途。
定位属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
position |
static, relative, absolute, fixed, sticky |
定位方式 |
top |
20px, 50%, auto |
距上边缘的距离 |
right |
20px, 50%, auto |
距右边缘的距离 |
bottom |
20px, 50%, auto |
距下边缘的距离 |
left |
20px, 50%, auto |
距左边缘的距离 |
z-index |
10, 999, -1 |
层叠顺序（数值越大越靠上） |
1. position 的值
| 值 | 描述 | 参考点 |
|---|---|---|
static |
默认值，正常文档流 | 无 |
relative |
相对定位 | 元素自身原来的位置 |
💡 relative 的妙用：
position: relative 最大的价值不是"微调元素位置"，而是作为 absolute 子元素的定位参照点。想让一个元素绝对定位到某个容器内，给那个容器加 position: relative。
⚠️ 脱离文档流： 绝对定位的元素会脱离文档流，不占空间。这意味着后面的元素会"挤上来"。如果父容器没有设置定位，
absolute 会相对于 <html> 定位——很可能不是你想要的。
| absolute | 绝对定位 | 最近的定位祖先 |
| fixed | 固定定位 | 浏览器视口 |
✅ 常见场景：
fixed 定位最适合做"回到顶部"按钮、固定导航栏、悬浮广告。注意在手机上 fixed 在某些浏览器中表现不一致，需要做兼容测试。
| sticky | 粘性定位 | 滚动容器 + 视口 |
📌 sticky 生效条件：
sticky 定位的元素必须至少指定 top、bottom、left、right 中的一个值才会生效。它像是 relative 和 fixed 的结合——在滚动到阈值前是相对定位，超过后变成固定定位。
2. static（静态定位）
这是元素的默认定位方式。元素按照正常文档流排列，top、right、bottom、left、z-index 等属性无效。
▶ 示例
HTML
<style>
.box {
position: static; /* 默认值，通常不写 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
3. relative（相对定位）
元素相对于自身原来的位置进行偏移。元素原本占据的空间仍然保留，不会影响其他元素的布局。
▶ 示例
HTML
<style>
.box {
position: relative;
top: 20px; /* 向下偏移20px */
left: 30px; /* 向右偏移30px */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
(1) relative 的主要用途
- 微调元素位置：在当前位置基础上做小幅调整
- 作为 absolute 的参考父元素：给子元素的绝对定位提供定位基准
▶ 示例
HTML
<style>
.parent {
position: relative; /* 子元素的绝对定位会参照这个元素 */
}
.child {
position: absolute;
top: 0;
right: 0; /* 定位到父元素右上角 */
}
</style>
<div class="parent">父容器元素</div>
<div class="child">子元素内容</div>
4. absolute（绝对定位）
元素脱离正常文档流（不占据空间），相对于最近的定位祖先元素进行定位。如果祖先元素都没有设置定位，则相对于初始包含块（通常是浏览器视口）。
▶ 示例
HTML
<style>
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中技巧 */
}
</style>
<div class="overlay">半透明遮罩层覆盖内容</div>
(1) absolute 的经典用法
1. 徽标/角标
▶ 示例
HTML
<style>
.card {
position: relative; /* 定位基准 */
width: 200px;
height: 300px;
}
.badge {
position: absolute;
top: -10px;
right: -10px;
background: red;
color: white;
padding: 5px 10px;
border-radius: 50%;
}
</style>
<div class="card">Card</div>
<div class="badge">徽章标记 99+</div>
2. 遮罩层
▶ 示例
HTML
<style>
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
</style>
<div class="overlay">半透明遮罩层覆盖内容</div>
3. 居中定位
▶ 示例
HTML
<style>
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="center">水平居中的内容</div>
5. fixed（固定定位）
元素相对于浏览器视口进行定位，不随页面滚动。
▶ 示例
HTML
<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
}
</style>
<header class="header">Header</header>
<div class="back-to-top">↑ 返回顶部</div>
(1) fixed 的常见场景
- 固定导航栏（固定在页面顶部）
- 回到顶部按钮（固定在右下角）
- 悬浮广告或提示
- 模态框背景
6. sticky（粘性定位）
元素在正常文档流中滚动，当滚动到达设定的阈值时"粘"在视口中。它是 relative + fixed 的混合体。
▶ 示例
HTML
<style>
.sticky-nav {
position: sticky;
top: 0; /* 当滚动到顶部时固定 */
background: white;
z-index: 100;
}
</style>
<div class="sticky-nav">Sticky nav</div>
(1) sticky 的使用要点
- 需要设置
top、bottom、left、right中的一个值才生效 - 父元素不能设置
overflow: hidden或overflow: auto - 父元素的高度必须大于 sticky 元素的高度（否则无法实现粘性效果）
7. z-index（层叠顺序）
当元素重叠时，z-index 控制谁在上层：
▶ 示例
HTML
<style>
.box1 {
position: absolute;
z-index: 10; /* 数值越大越靠前 */
}
.box2 {
position: absolute;
z-index: 5; /* 被 box1 覆盖 */
}
</style>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
注意：z-index 只在定位元素（非 static）上生效。
(1) 层叠上下文
z-index 是在同一个"层叠上下文"中比较的。每个定位元素都会创建一个层叠上下文，子元素的 z-index 只在父元素的上下文中有效。
8. 定位属性总结
| 定位方式 | 脱离文档流 | 参考对象 | 滚动 |
|---|---|---|---|
| static | 否 | - | 跟随滚动 |
| relative | 否（保留空间） | 自身原位置 | 跟随滚动 |
| absolute | 是 | 最近的定位祖先 | 跟随祖先滚动 |
| fixed | 是 | 视口 | 不跟随滚动 |
| sticky | 混合 | 滚动容器+视口 | 先跟随，后固定 |
❓ 常见问题
Q position: relative 有什么用？
A 最常用的作用是作为 absolute 子元素的定位参照点。给父容器加
position: relative（不偏移），子元素 position: absolute 就会相对于父容器定位。没有 relative 的父容器，absolute 会相对于整个页面定位。Q fixed 定位在手机上不好用怎么办？
A fixed 在移动端 Safari 等浏览器中表现不一致，特别是在键盘弹出或页面滚动时。可以用
position: sticky 替代部分场景，或者用 JavaScript 检测移动端做特殊处理。Q z-index 设了很大还是被挡住？
A z-index 只在同一个层叠上下文中有效。如果父元素设置了 z-index，子元素的 z-index 只在父元素的上下文中比较，不会跨父元素。检查是否有父元素的 z-index 较低、或者父元素设置了 opacity 等属性创建了新的层叠上下文。
📖 小节
- CSS 定位是布局中非常强大的工具
relative适合微调和作为定位基准absolute适合精确定位子元素到父元素的某个位置fixed适合固定在视口中的元素（如导航栏）sticky则适合"到达某个位置后固定"的场景- 用好定位，再配合
z-index控制层叠，几乎可以处理任何布局需求
📝 作业
- 创建一个"商品卡片"，图片右上角有一个"热销"角标（使用
position: absolute实现）。 - 制作一个固定在页面底部的"底部导航栏"或"版权声明"（使用
position: fixed）。 - 制作一个"粘性标题"——列表中的分类标题在滚动到顶部时固定，直到下一个标题推走它（使用
position: sticky）。 - 在一个容器中实现子元素的绝对居中（同时使用 absolute、top/left 和 transform）。
