绝对定位是CSS特性而非HTML5特性，其行为始终一致：脱离文档流、相对最近已定位祖先定位；top/left失效主因是父容器未设position:relative；居中推荐top:50%+left:50%+transform:translate(-50%,-50%)；z-index仅对已定位元素在同层叠上下文中生效，父级无position或opacity/transform/filter等会创建新层叠上下文。
绝对定位
不是 HTML5 特性，而是 CSS 的定位机制，
在 HTML5 文档中行为和以前完全一致——它脱离文档流、相对于最近的「已定位祖先元素」（即
为
、
、
或
）进行偏移。
为什么
/
没生效？
最常见原因是：父容器没设
，导致绝对定位元素往上回溯到
或
，视觉上“飞走了”。
检查父级是否显式设置了
（哪怕只是占位用）
避免父级是
或
且没设
——它们本身不构成“已定位上下文”
（默认值）不会创建定位上下文，哪怕写了
也无效
如何让绝对定位元素居中？
靠
/
+
是最可靠方式，避免依赖宽高是否已知。
不用
负值——需要提前知道元素尺寸
不用
父容器 +
——那属于布局容器方案，不是绝对定位本身的技巧
如果父容器有
，注意
可能引发裁剪边界变化
不起作用的三个典型场景
只对「已定位元素」有效，且层级比较发生在同一 stacking context 内。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
父容器没设
，子元素即使设了
也无效（因为没进入 stacking context）
两个绝对定位元素的父容器分别设置了
和
，但子元素自身
再大，也无法越过父容器的层级限制
、
、
等属性会隐式创建新的 stacking context，打断原有层级关系
绝对定位真正难的不是写法，而是理解「定位上下文」的嵌套与中断——一个没设
的 wrapper，可能让整块弹窗逻辑失效；一个无意加上的
，会让 tooltip 被挡在背后。这些细节比语法本身更常决定成败。
position: absolutepositionrelativeabsolutefixedstickytopleftposition: relativeposition: relativedisplay: flexdisplay: gridpositionposition: statictop: 0toplefttransformdiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}marginflexalign-items/justify-contentoverflow: hiddentransformz-indexz-indexpositionz-indexz-index: 1z-index: 2z-indexopacity < 1transformfilterpositionfilter: blur(1px)