定位元素被裁剪的主因是父容器成为绝对定位元素的包含块后其overflow生效；transform会创建新包含块导致定位错乱；z-index受层叠上下文隔离；fixed元素受transform祖先影响退化为relative定位。
定位元素被裁剪：overflow 隐藏了 position: absolute 子元素
当父容器设置了 overflow: hidden、overflow: auto 或 overflow: scroll，而子元素用了 position: absolute 且部分区域超出父容器边界时，超出部分会被直接裁剪——这是最常见却容易忽略的可视范围问题。
根本原因在于：position: absolute 元素的包含块（containing block）默认是「最近的 position 值不为 static 的祖先」；如果父容器没设 position，浏览器会继续往上找，最终可能落到 body 或 html 上，此时它的溢出行为就和父容器无关了。但一旦父容器加了 position: relative（或 absolute/fixed），它就成了包含块，其 overflow 就开始生效。
- 检查父容器是否意外设置了
position: relative+overflow: hidden - 若需保留父容器的
overflow行为，又想让绝对定位子元素完全可见，可将该子元素移出父容器 DOM 结构，用 JS 动态挂载到body下，并手动计算位置 - 更轻量的做法：给父容器加
overflow: visible（注意：这会覆盖已设的hidden/auto，且可能影响内部滚动逻辑）
transform 破坏包含块，导致 absolute 定位参照错乱
如果某个祖先元素设置了 transform（哪怕只是 transform: translateZ(0)），它会触发新的层叠上下文（stacking context）并**同时成为 position: absolute 元素的包含块**——即使它本身 position 是 static。这常导致定位坐标突然“偏移”，看起来像“消失”或“错位”，实则是参照系变了。
典型场景：轮播图容器加了 transform: translateX(...)，里面弹出的 tooltip 用 absolute 定位后位置飘忽不定。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查“Computed”面板，看
Containing Block是哪个元素（Chrome DevTools 会在 Elements 面板高亮显示） - 避免在定位元素的任意祖先上使用
transform、filter、will-change等会创建新包含块的属性 - 若必须用
transform做动画，把需要精确定位的元素（如下拉菜单、浮层）提升到同级或更高层级，脱离该变换祖先
z-index 失效：不是层级不够，而是层叠上下文隔离了
z-index 只在同一个层叠上下文中起作用。如果一个 position: absolute 元素的父容器有 z-index 且创建了层叠上下文（比如带 position: relative + z-index），那么该子元素的 z-index 就只和父容器内部比，无法盖过外部同级元素——即使数值设得再大，也“不可见”于外部容器之上。
现象：下拉菜单明明 z-index: 9999，却被旁边一个 z-index: 10 的 banner 挡住。
- 用 DevTools 的 “Layers” 面板（或勾选 Rendering → “Paint flashing”）观察层叠上下文边界
- 确保定位元素及其关键父容器处于同一层叠上下文层级；必要时移除中间某层的
z-index或position - 不要盲目堆砌
z-index: 999999，先确认它有没有被包裹进一个低层级的上下文中
固定定位（position: fixed）脱离视口滚动，但受 transform 祖先影响
position: fixed 元素本应相对于视口定位，但如果其某个祖先元素设置了 transform、perspective 或 filter，它会退化为相对于该祖先定位（即表现类似 absolute），导致滚动时“粘滞”或位置异常。
例如：整个页面外层包了个 div，加了 transform: scale(0.95) 做缩放适配，里面所有 fixed 导航栏都会跟着缩放并错位。
- 检查
fixed元素的所有祖先，是否有非none的transform、perspective、filter、will-change - 修复方式：把
fixed元素提到body直接子级；或移除触发层叠上下文的祖先样式 - 注意：
fixed元素在打印媒体（@media print）中默认不显示，需显式设置display: block和position: static等适配
可视范围问题极少是单一 CSS 属性导致的，往往是 position、overflow、transform、z-index 四者交织作用的结果。调试时优先打开浏览器的 Layers 面板和 Containing Block 提示，比反复改 z-index 数值有效得多。
