绝对定位需父容器设position: relative作为参考系，否则默认以为基准；top/right/bottom/left可共存但单位宜用px或rem；z-index生效需同层叠上下文；移动端慎用transform配合绝对定位。
绝对定位的必需前提：父容器得是相对定位
直接给元素加 position: absolute 不会按你预期“钉”在页面某处，它会往上找第一个 position 值为 relative、absolute 或 fixed 的祖先元素作为参考系。没找到就默认以 为基准——这往往导致位置飘忽。
所以实际操作中，90% 的情况你要先给父容器设 position: relative：
<div style="position: relative; width: 500px; height: 300px;"> <div style="position: absolute; top: 20px; left: 30px;">我被固定在父容器内</div> </div>
- 不设父级
position: relative，top/left就可能相对于整个视口，而不是你想要的模块区域 -
position: static（默认值）的父元素会被跳过，哪怕它有 padding 或 border - 如果父容器本身是 flex 或 grid 容器，
position: relative依然有效，但注意子项的布局行为不会因此改变
top / right / bottom / left 的数值单位和行为差异
这四个偏移属性决定元素离参考边界的距离，但它们不是互斥的——你可以同时设 top 和 bottom，浏览器会按可用空间计算高度；设 left 和 right 同理影响宽度。
- 单位优先用
px或rem，避免用%：百分比是相对于参考容器的宽/高，容易因父容器尺寸变化而错位 - 设
top: 0; bottom: 0;会让元素撑满参考容器的垂直方向（前提是没设height） - 如果同时设了
top和height，又没设bottom，那bottom会自动计算为剩余空间，但可能被忽略——别依赖这种隐式行为
z-index 不生效？大概率是层叠上下文搞错了
绝对定位元素的 z-index 只在同一个层叠上下文中起作用。如果父容器没创建新层叠上下文，你的 z-index: 999 可能被隔壁模块的 z-index: 1 盖住。
- 只要父容器有
position且不是static，再加上z-index（哪怕值为 1），就会创建新的层叠上下文 - 常见陷阱：给绝对定位元素设了
z-index，但它的某个祖先（比如导航栏）也设了position: relative却没设z-index——此时该祖先的层叠等级默认为 0，会把子元素全框死在里面 - 调试时用浏览器开发者工具检查「Computed」面板里的
z-index是否显示为实际值，还是被标记为auto
移动端慎用绝对定位，尤其配合 transform
在 iOS Safari 或某些 Android 浏览器里，绝对定位元素如果还用了 transform: translateX(10px)，可能触发合成层异常，导致滚动卡顿或点击失效。
- 优先用
top/left控制位置，而不是靠transform微调——后者主要用于动画，不是定位手段 - 如果必须用
transform，确认父容器没设overflow: hidden，否则子元素超出部分会被裁切，且绝对定位的参考边界可能意外变化 - 测试真机：模拟器里看起来正常，不代表在 iPhone 上不抖动或错位
position 值，可能牵出三个地方要同步调整。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
