position属性需配合top/left等偏移及合理定位上下文才生效；absolute参考最近已定位祖先，无则退至视口；relative挪位仍占位，适合作为absolute容器；fixed受transform等影响会改变参考系；sticky需指定阈值且依赖可滚动上下文。
position 属性不是“加了就能精确定位”，它必须配合 top、left 等偏移属性 + 合理的定位上下文才能生效。直接写 position: absolute 却没管父级，元素大概率飞到页面左上角甚至被裁剪。
relative 怎么用才不踩坑
相对定位本质是“挪完还占位”，适合微调或当 absolute 的容器。
- 只设
position: relative但不写top/left，视觉毫无变化——这是正常行为，不是失效 - 如果目的是为子元素提供定位参考，请确保父元素显式声明
position: relative（哪怕不偏移）；否则子元素的absolute会往上找，可能落到html根上 -
z-index在relative元素上有效，但仅对同层兄弟元素起作用；不要指望靠它跨层级盖过fixed导航栏
absolute 定位为什么总跑偏
绝对定位的参考点不是屏幕左上角，也不是 body，而是“最近的已定位祖先”——即 position 值为 relative、absolute 或 fixed 的父级。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 若所有祖先都是
static（默认），则参考点退化为初始包含块（通常是视口左上角），此时top: 0; left: 0就真贴浏览器边沿 - 常见错误：给
absolute元素设了top: 20px，但父容器没设position: relative，结果它相对于整个页面顶部下移 20px，而不是相对于父容器下移 - 注意：父容器设了
relative后，若自身有padding或border，absolute子元素的top/left是从父容器 content box 左上角算起，不是 padding box
fixed 定位滚动时消失或错位
fixed 的参考系永远是视口（viewport），和文档流完全无关。但它容易被某些 CSS 规则干扰。
- 父元素设置了
transform、perspective或filter，会强制创建新的包含块，导致fixed元素变成相对于该父容器定位，而非视口——这是最隐蔽的坑 - 移动端 Safari 对
fixed支持较弱，尤其在输入框弹出软键盘时，可能触发意外重排；建议用position: sticky替代简单吸顶场景 -
fixed元素脱离文档流，不会触发父容器高度计算；如果父容器高度依赖子元素，它“消失”后可能导致布局塌陷
sticky 定位为什么没反应
sticky 不是“自动吸顶”，它需要明确的阈值条件和可滚动的上下文。
- 必须指定
top、bottom、left或right中至少一个值，否则表现等同于static - 它的行为依赖父容器有可滚动区域；如果父容器
height不足、或overflow是visible（默认），sticky永远不会触发“固定”状态 - 不能嵌套在
transform或will-change的祖先内，否则降级为relative - 兼容性注意：IE 完全不支持，旧版 Safari 需要
-webkit-sticky前缀（2026 年仍需检查目标用户环境）
position 时都得问一句：这个元素的“参考系”到底是谁？浏览器不会告诉你它偷偷换了个父级作为定位根，只能靠开发者主动约束上下文。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
