CSS定位：relative、absolute、fixed、sticky
📐 定位理论 ↔ 你的项目实践对照表
| 定位类型 | 理论要点 | 你的项目中的应用 |
|---|---|---|
relative | 相对于元素自身原本位置偏移，不脱离文档流Doesnotleave the document flow（保留原占位）。 | 父容器：给<a>标签或<div>设置position: relative;，为内部的绝对定位子元素提供定位基准。 |
absolute | 相对于最近的非static父级定位，脱离文档流（不占位）。 | “Local”徽章：给<span>设置position: absolute; top: 0; right: 0;，使其相对于父容器（relative）定位在右上角。 |
fixed | 相对于浏览器视口(viewport)定位，脱离文档流，滚动时固定位置。 | 你之前想要实现的右侧信息栏悬浮效果（类似 Envato 原站）。 |
sticky | 在滚动到特定阈值前表现为relative，之后表现为fixed，不脱离文档流。 | 更适合你右侧栏的平滑悬浮效果：滚动时先随内容移动，到达顶部后固定。 |
static | 默认值，top/right/bottom/left无效，在文档流中正常排列。 | 大部分普通内容的默认定位方式。 |
🔧 从理论到代码：你在项目中用到的定位模式
1. “父相子绝” (Parent Relative, Child Absolute) —— 用于徽章定位
这是你的图片里提到的“常规玩法”，正是实现“Local”徽章在图片右上角的核心。
<!-- 父容器：相对定位 --> <a href="..." class="d-block position-relative" style="..."> <!-- 子元素：绝对定位 --> <span class="badge bg-success position-absolute top-0 end-0 m-1"> Local </span> <img ... /> </a>工作原理：
父容器
position: relative;建立了一个定位锚点。子徽章
position: absolute;配合top: 0; end-0;（即right: 0;）将自己固定在父容器的右上角，完全脱离图片的文档流，所以它会覆盖在图片上方。父容器没有设置
overflow: hidden;时，徽章甚至可以溢出父容器边界。
2. Fixed 与 Sticky —— 用于右侧悬浮栏
| 方案 | 代码实现 | 效果 | 适用场景 |
|---|---|---|---|
fixed | position: fixed; top: 30px; | 滚动时，元素始终固定在视口右侧。 | 需要元素完全脱离文档流，永远停留在固定位置（如回到顶部按钮）。 |
sticky | position: sticky; top: 30px; | 滚动时，元素在容器内先随内容滚动，到达距视口顶部 30px 时固定，直到其父容器滚出视口。 | 更平滑的侧边栏：它不会突然跳脱文档流，在到达固定点前不会遮挡其他内容，体验更好。 |
建议：对于你的详情页右侧栏，sticky是比fixed更优的选择，因为它能自然处理与页脚的边界，不会在滚动到页脚时重叠。
⚠️ 常见误区提醒
absolute一定会脱离文档流→ 是的，所以如果父容器高度只由普通流内容撑起，绝对定位的子元素不会撑开父容器，可能导致重叠。relative不脱离文档流→ 是的，即使设置top: -10px;，它在文档流中原本占用的空间依然保留，只是视觉上移了。sticky需要配合top/bottom等阈值→ 必须指定一个阈值（如top: 0;），否则它等同于relative。fixed相对于浏览器窗口→ 注意，如果父元素有transform、perspective或filter属性，fixed会相对于该父元素定位（形成新的包含块），而非视口。
💡 项目建议：将右侧栏从fixed改为sticky
如果你之前用fixed实现右侧悬浮，遇到“滚动到页脚时遮挡”的问题，改用sticky可以自然解决：
.sticky-sidebar-wrapper { position: sticky; top: 30px; /* 距离视口顶部30px时开始固定 */ align-self: start;/* 在flex容器中防止拉伸 */ }这样，右侧栏会优雅地“粘”在视口右侧，直到它的父容器（整个.row）底部离开视口，它才会继续随内容滚动，完美避开页脚。
Referrence:
https://www.bilibili.com/video/BV1qJrgYNEKG?t=1.0&p=81https://www.bilibili.com/video/BV1qJrgYNEKG?t=1.0&p=81