CSS3 的 position 属性，核心作用是控制元素在页面中的定位方式，决定元素如何脱离正常文档流、如何相对于父元素/视口进行定位，是布局中实现“悬浮、固定、层叠”等效果的核心属性，常用且易混淆，本篇将从基础到实战，彻底讲懂。
核心原则：position 的取值决定元素的定位模式，配合 top、right、bottom、left（以下简称“方位属性”）控制具体位置，未设置方位属性时，元素默认保持原有位置。
一、position 5个取值（必学，按常用度排序）
position 有5个核心取值，其中 static 是默认值，relative、absolute、fixed 是高频常用值，sticky 是粘性定位（场景化常用），逐一拆解如下。
1. static（默认值：静态定位）
最基础的定位方式，元素遵循正常文档流，自上而下、从左到右排列，不受方位属性（top/right等）的影响，也不会脱离文档流。
/* 默认无需主动设置，所有元素默认都是 static */
.box {
position: static;
top: 20px; /* 无效，static 不识别方位属性 */
left: 20px; /* 无效 */
width: 100px;
height: 100px;
background: #00aaff;
}
特点：无法通过方位属性调整位置，完全遵循正常布局，一般用于“取消已设置的定位”（如覆盖父元素的定位）。
2. relative（相对定位）
元素不脱离正常文档流，保留自身在文档流中的原有位置，方位属性（top/right等）相对于自身原有位置进行偏移，不会影响其他元素的布局。
.box {
position: relative;
top: 20px; /* 相对于自身原有位置，向下偏移20px */
left: 30px; /* 相对于自身原有位置，向右偏移30px */
width: 100px;
height: 100px;
background: #ff7d00;
}
关键要点：
- 不脱离文档流，自身原有位置会被保留（其他元素不会填充进来）；
- 偏移量相对于“自身原本的位置”（而非父元素）；
- 常用场景：作为 absolute 定位的“参考容器”（子绝父相），或微调元素位置。
3. absolute（绝对定位）【重点】
元素完全脱离正常文档流，不再保留自身原有位置（其他元素会填充其空位），方位属性相对于最近的已定位祖先元素（position 不为 static 的祖先）定位；若没有已定位祖先，则相对于根元素（html）定位。
/* 父容器设置 relative（作为参考） */
.parent {
position: relative;
width: 300px;
height: 300px;
background: #f5f5f5;
}
/* 子元素设置 absolute（相对于父容器定位） */
.child {
position: absolute;
top: 50px; /* 相对于父容器顶部，向下50px */
right: 50px; /* 相对于父容器右侧，向左50px */
width: 100px;
height: 100px;
background: #00cc66;
}
关键要点（避坑核心）：
- 脱离文档流，不占据页面空间，会“悬浮”在其他元素上方；
- 定位参考物：优先找“最近的、position 为 relative/absolute/fixed/sticky”的祖先元素，没有则相对于 html（页面）；
- 高频场景：弹窗、下拉菜单、元素悬浮、精准定位（如按钮右上角的角标）；
- 易错点：若父元素未设置定位，子元素 absolute 会相对于页面定位，导致布局错乱。
4. fixed（固定定位）
元素完全脱离正常文档流，方位属性相对于浏览器视口（viewport） 定位，无论页面如何滚动，元素始终固定在视口的指定位置，不随页面滚动而移动。
/* 页面右下角固定按钮 */
.fixed-btn {
position: fixed;
bottom: 30px; /* 相对于视口底部，向上30px */
right: 30px; /* 相对于视口右侧，向左30px */
width: 60px;
height: 60px;
border-radius: 50%;
background: #ff4444;
color: white;
text-align: center;
line-height: 60px;
}
关键要点：
- 脱离文档流，不占据页面空间，始终悬浮在视口固定位置；
- 定位参考物是“浏览器视口”，与父元素无关；
- 常用场景：固定导航栏、回到顶部按钮、悬浮客服按钮。
5. sticky（粘性定位）
“相对定位 + 固定定位”的结合体，元素默认遵循正常文档流，当页面滚动到指定位置时，自动切换为固定定位，固定在视口的指定位置；滚动超出范围后，恢复为相对定位。
/* 粘性导航栏 */
.sticky-nav {
position: sticky;
top: 0; /* 滚动到顶部距离为0时，固定 */
width: 100%;
height: 60px;
background: #333;
color: white;
line-height: 60px;
padding: 0 20px;
}
关键要点：
- 未滚动到指定位置时，遵循正常文档流；滚动到阈值（top/right等设置的值）时，变为固定定位；
- 必须设置方位属性（top/right/bottom/left），否则粘性效果无效；
- 常用场景：粘性导航栏、列表标题悬浮（滚动时标题固定在顶部）。
二、核心对比（快速区分，避坑关键）
| 取值 | 是否脱离文档流 | 定位参考物 | 核心场景 |
|---|---|---|---|
| static | 否 | 无（不识别方位属性） | 默认布局、取消定位 |
| relative | 否 | 自身原有位置 | 作为absolute参考容器、微调位置 |
| absolute | 是 | 最近的已定位祖先 / html | 弹窗、悬浮元素、精准定位 |
| fixed | 是 | 浏览器视口 | 固定导航、回到顶部按钮 |
| sticky | 视滚动状态（未固定时否，固定时是） | 正常流时自身，固定时视口 | 粘性导航、悬浮标题 |
三、实战案例（直接复制套用，覆盖高频场景）
案例1：子绝父相（最常用，精准定位）
场景：卡片内部的按钮、角标，相对于卡片精准定位，不影响卡片布局。
/* 父卡片 - 相对定位（参考容器） */
.card {
position: relative;
width: 280px;
height: 380px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
padding: 20px;
}
/* 子元素 - 绝对定位（相对于卡片） */
.card-badge {
position: absolute;
top: 10px;
right: 10px;
background: #ff4444;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
}
.card-btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%); /* 水平居中 */
width: 80%;
height: 40px;
background: #00aaff;
color: white;
border: none;
border-radius: 4px;
}
案例2：固定回到顶部按钮
场景：页面滚动时，右下角固定显示回到顶部按钮，点击可返回页面顶部。
.back-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0, 170, 255, 0.8);
color: white;
text-align: center;
line-height: 50px;
cursor: pointer;
transition: all 0.3s;
}
.back-top:hover {
background: #00aaff;
transform: scale(1.1);
}
案例3：粘性导航栏
场景：页面顶部导航栏，滚动页面时，导航栏固定在视口顶部，不随页面滚动消失。
/* 页面头部 */
.header {
height: 100px;
background: #f5f5f5;
line-height: 100px;
text-align: center;
font-size: 24px;
}
/* 粘性导航 */
.sticky-nav {
position: sticky;
top: 0;
width: 100%;
height: 60px;
background: #333;
color: white;
padding: 0 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 导航菜单 */
.nav-menu {
display: flex;
gap: 30px;
line-height: 60px;
}
/* 页面内容（用于测试滚动） */
.content {
height: 1500px;
padding: 20px;
}
四、避坑注意事项（必看）
- absolute 定位的元素，若父元素未设置定位（position 为 static），会相对于 html 定位，容易导致布局错乱，建议遵循“子绝父相”原则。
- fixed 定位的元素，会脱离文档流且相对于视口定位，若父元素有 transform 属性（如 scale、translate），会导致 fixed 定位失效（参考物变为父元素）。
- sticky 定位必须设置方位属性（top/right等），否则无法触发粘性效果；且父元素不能有 overflow: hidden 属性，否则粘性效果失效。
- 脱离文档流的元素（absolute、fixed），会覆盖在未脱离文档流的元素上方，可通过 z-index 属性调整层级（z-index 值越大，层级越高）。
- relative 定位的元素，虽然不脱离文档流，但会创建“层叠上下文”，其内部的绝对定位元素会相对于它定位，而非相对于更外层的元素。
五、总结（快速记忆）
-
默认 static：不脱离流，方位无效；
-
relative：不脱离流，相对于自身，做参考容器；
-
absolute：脱离流，相对于已定位祖先，精准定位；
-
fixed：脱离流，相对于视口，固定不动；
-
sticky：混合定位，滚动触发固定，需设方位属性。
记住“子绝父相”“fixed 相对视口”“sticky 需设方位”这3个关键点，就能解决90%的定位场景，剩下的靠实战熟练即可。
