加了 position: absolute 却未脱离文档流是误解，实际已脱离但默认定位在 top: 0; left: 0（相对于最近定位祖先），需显式设置 top/left 等偏移量才可见位移；若无定位祖先，则相对于 html 根元素。

直接在 style 属性里写 position: fixed 或 position: absolute 就能生效，但实际效果取决于父容器、文档流和滚动行为——不理解层叠上下文和包含块，很容易“设了却不动”。

为什么元素加了 position: absolute 还是没脱离文档流？

常见错误是只写了 position: absolute，但没配 top/left 等偏移量。此时元素虽已脱离文档流，位置仍默认为 top: 0; left: 0（相对于最近的定位祖先），视觉上可能“卡在原位”，误以为没生效。

• 必须显式设置至少一个偏移属性（如 top: 10px、right: 20px）才能看到位移效果
• 如果所有祖先都没有定位（即 position 值为 static，也就是默认值），absolute 元素会相对于 根元素定位
• 父容器用了 transform、perspective 或 filter，也会创建新的包含块，导致定位参考点意外改变

position: fixed 在移动端或 iframe 里失效怎么办？

fixed 的定位基准是视口（viewport），但某些环境会破坏这个行为：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• iOS Safari 旧版本（iOS 12 及更早）中，fixed 元素在页面缩放或键盘弹出时可能错位；需配合 viewport meta 设置 width=device-width, initial-scale=1.0 并避免 user-scalable=yes
• 嵌入 的页面里，fixed 是相对于 iframe 自身视口，不是外层页面——若需跨 iframe 固定，得用 JS 监听外层 scroll + 动态计算位置
• Android WebView 中，若父容器有 overflow: hidden 且高度不足，可能裁掉 fixed 元素，需检查层级和 overflow 行为

怎么让 absolute 元素精准对齐父容器右下角？

关键不是靠 margin 或负值“猜”，而是利用定位组合：

• 给父容器加 position: relative（或其它非 static 值），确保它是 absolute 子元素的包含块
• 子元素写：position: absolute; bottom: 0; right: 0;
• 如果父容器有 padding，而你想贴着内容区右下角（不是边框），就改用 bottom: 1em; right: 1em 或具体像素值
• 注意：若父容器宽高是 auto（比如仅由子内容撑开），absolute 元素不会影响其尺寸，可能导致“悬空”感——必要时可加 min-height 或占位

真正难的不是写那行 position，而是判断它到底相对于谁在定位、谁截断了它的渲染范围、以及滚动时谁该动谁不该动。多用浏览器开发者工具的“Computed”面板看 Containing block 和 Offset parent，比反复改 CSS 更快。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！