用 position: absolute 配合 z-index 是最直接的浮层方案，需父容器设 position: relative 防止定位错乱；z-index 仅对定位元素生效，且受层叠上下文限制；transform 可视觉浮起但不占布局空间，适合动画场景。
用 position: absolute 配合 z-index 是最直接的办法
想让一个 div 浮在另一个上面，本质是控制层叠顺序和定位方式。position: absolute 让元素脱离文档流、可自由定位；z-index 决定谁在上谁在下。但这两个属性必须一起用才有效——只设 z-index 不加定位，它压根不生效。
-
z-index只对「定位元素」（position值为relative、absolute、fixed或sticky）起作用 - 父容器最好设
position: relative，否则absolute子元素会相对于整个视口定位，容易飘走 -
z-index是整数，值越大越靠前；但要注意「层叠上下文」：如果父级创建了新上下文（比如用了opacity: 0.99或transform），子元素的z-index就只在该上下文内比较
示例：
<div style="position: relative; width: 300px; height: 200px; background: #eee;"> <div style="width: 100px; height: 100px; background: red;"></div> <div style="position: absolute; top: 20px; left: 20px; z-index: 2; width: 80px; height: 80px; background: blue;"></div> </div>
别踩「父容器没设 position 导致定位错乱」这个坑
很多人写完 position: absolute 发现元素飞到页面左上角，不是代码写错了，而是它的最近定位祖先不存在——浏览器就往上一直找，最后落到 上，相当于全屏定位。
- 只要你想让子
div相对于某个父容器浮动，那个父容器就必须有position值（哪怕只是relative） - 不要依赖默认的
static，它不构成定位上下文 - 用浏览器开发者工具检查元素的「Computed」面板，看
position和offsetParent是谁，能快速定位问题
transform 也能“浮起来”，但它是视觉层叠，不占布局空间
如果你只是想让一个 div 看起来盖在另一个上面，又不想它影响其他元素排版，transform: translateZ(1px) 或 transform: scale(1.01) 是替代方案。它会触发硬件加速，且不会破坏文档流。
- 这种方式不改变
z-index层级，而是靠 3D 渲染层实现视觉覆盖 - 兼容性好（IE10+），但注意：它不能解决点击穿透问题（底层元素仍可被点中），需要额外加
pointer-events: none控制 - 性能比纯
z-index略高，适合动画场景；但调试时看不到 DOM 层级变化，容易误判
移动端要注意 fixed 在 iOS Safari 的渲染异常
在 iOS Safari 中，position: fixed 元素有时会“闪一下”或错位，尤其配合 z-index 和滚动时。这不是 bug，是 Safari 对 fixed 定位的优化策略导致的。
立即学习“前端免费学习笔记（深入）”；
- 避免在
fixed元素上同时设很高的z-index和透明度/阴影，容易触发重绘异常 - 更稳妥的做法是改用
position: absolute+top: 0+ 监听scroll手动更新位置（仅当真需要跟随滚动时） - 如果只是静态悬浮（比如右下角按钮），用
position: fixed没问题，但务必测试真机，模拟器不一定复现
层叠关系不是数字越大就越稳，关键看上下文是否隔离。稍复杂点的布局里，一个 opacity: 0.99 就可能让整个模块的 z-index 重新洗牌。
