绝对定位是CSS特性而非HTML5特性，其行为始终一致：脱离文档流、相对最近已定位祖先定位；top/left失效主因是父容器未设position:relative；居中推荐top:50%+left:50%+transform:translate(-50%,-50%)；z-index仅对已定位元素在同层叠上下文中生效，父级无position或opacity/transform/filter等会创建新层叠上下文。
绝对定位不是 HTML5 特性，而是 CSS 的定位机制，position: absolute 在 HTML5 文档中行为和以前完全一致——它脱离文档流、相对于最近的「已定位祖先元素」（即 position 为 relative、absolute、fixed 或 sticky）进行偏移。
为什么 top/left 没生效？
最常见原因是：父容器没设 position: relative，导致绝对定位元素往上回溯到 或 ，视觉上“飞走了”。
- 检查父级是否显式设置了
position: relative（哪怕只是占位用） - 避免父级是
display: flex或display: grid且没设position——它们本身不构成“已定位上下文” -
position: static（默认值）不会创建定位上下文，哪怕写了top: 0也无效
如何让绝对定位元素居中？
靠 top/left + transform 是最可靠方式，避免依赖宽高是否已知。
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 不用
margin负值——需要提前知道元素尺寸 - 不用
flex父容器 +align-items/justify-content——那属于布局容器方案，不是绝对定位本身的技巧 - 如果父容器有
overflow: hidden，注意transform可能引发裁剪边界变化
z-index 不起作用的三个典型场景
z-index 只对「已定位元素」有效，且层级比较发生在同一 stacking context 内。
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
position，子元素即使设了z-index也无效（因为没进入 stacking context） - 两个绝对定位元素的父容器分别设置了
z-index: 1和z-index: 2，但子元素自身z-index再大，也无法越过父容器的层级限制 opacity 、transform、filter等属性会隐式创建新的 stacking context，打断原有层级关系
绝对定位真正难的不是写法，而是理解「定位上下文」的嵌套与中断——一个没设 position 的 wrapper，可能让整块弹窗逻辑失效；一个无意加上的 filter: blur(1px)，会让 tooltip 被挡在背后。这些细节比语法本身更常决定成败。
