绝对定位元素默认不占空间且脱离文档流，父容器需设position: relative等非static值才能正确参照，否则偏移参考上级定位节点；z-index仅对已定位元素生效，且受层叠上下文限制。
绝对定位元素默认不占空间，但脱离文档流后可能引发连锁错位
用 position: absolute 的元素确实从正常文档流中被移除，父容器高度不会包含它，兄弟元素也会“无视”它的存在——这是它不占空间的直接表现。但问题常出在父容器没设 position（比如还是 static），导致绝对定位元素按最近有定位的祖先计算偏移，结果飘到意想不到的位置，看起来像“挤歪了其他内容”。
常见错误现象：div 加了 position: absolute 后，下面的按钮突然上移、文字重叠、滚动条异常出现。
- 父容器必须显式设置
position: relative（或absolute/fixed），否则偏移参考的是body或更外层定位节点 - 如果父容器本身高度由子元素撑开，加了
absolute后高度会塌陷——这不是“占不占空间”的问题，而是父容器失去了高度来源 - 不要依赖
absolute元素去撑开父级；需要高度时，要么预留padding，要么用伪元素或空div占位（但属权宜之计）
top/right/bottom/left 为 0 不等于“贴边”，得看父容器有没有定位上下文
写 top: 0; left: 0; 很容易以为元素会紧贴父容器左上角，但若父容器是 position: static（默认值），浏览器会一路往上找，直到 html 或有定位的祖先为止。这时候“父容器”其实是假象，真正参考的是整个视口或某个意外的包裹块。
使用场景：做弹窗遮罩、图标右上角徽标、表单输入框右侧清空按钮。
- 务必检查父容器是否设置了
position: relative（最常用）或其它非static值 -
inset: 0是top/right/bottom/left: 0的简写，但兼容性稍差（IE 不支持），生产环境建议拆开写 - 如果父容器宽高不定，又想居中，避免只靠
top: 50%; left: 50%，记得配合transform: translate(-50%, -50%)，否则会因自身尺寸导致偏移不准
z-index 生效的前提是元素已定位，且只对同级定位元素排序
z-index 不是万能层级开关。它只对 position 值为 relative、absolute、fixed 或 sticky 的元素起作用。一个 div 即使写了 z-index: 999，只要 position 还是 static，就完全无效。
性能影响：频繁变更 z-index 可能触发重排（reflow），尤其在动画中叠加多层绝对定位元素时，卡顿往往由此而来。
- 别给非定位元素设
z-index，浏览器会忽略，但开发者可能误以为“起了作用” -
z-index的比较只发生在同一层叠上下文（stacking context）内；父元素设了z-index且定位了，就会创建新层叠上下文，子元素的z-index只在该上下文内有效 - 调试时用浏览器开发者工具的“Layers”面板比单纯看
z-index数值更可靠，能看清实际层叠顺序
绝对定位 + transform 可能导致模糊或锯齿，尤其在高清屏上
当用 transform: translateX(0.5px) 或缩放类操作配合绝对定位时，元素可能落在非整像素位置，GPU 渲染会插值，造成边缘发虚。这在 macOS Retina 屏或 Windows 高 DPI 设置下特别明显。
使用场景：模态框淡入滑入动画、卡片悬停上浮、下拉菜单位移过渡。
- 优先用
transform: translateZ(0)或will-change: transform触发硬件加速，但别滥用——每个都加反而增加内存开销 - 避免小数位偏移，如
left: 12.3px；可改用transform: translateX(12px)，再配合整数scale()控制大小 - 必要时加
backface-visibility: hidden抑制亚像素渲染，但仅限已确认模糊问题的元素
最容易被忽略的一点：绝对定位不是布局首选方案。它切断了与周围元素的尺寸联动，一旦需求变成“宽度随父容器变化”或“下方元素要自动避让”，就得绕路补丁。真要动态响应，优先考虑 flex 或 grid 内部的对齐控制，而不是靠 absolute 硬推。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
