Unstacking CSS Stacking Contexts
设置高z-index值后元素仍被遮挡，常因CSS属性意外创建了堆叠上下文。网页元素在z轴上的排序由堆叠上下文控制，其行为类似文件夹：一旦子元素被归入父级上下文，其z-index仅在该文件夹内生效，无法跨越到其他上下文。例如，一个z-index为9999的元素若位于z-index为1的父容器中，它仍会显示在z-index为2的兄弟容器之下。 问题常出现在模态框、下拉菜单等组件。当这些组件被包裹在具有定位或transform、opacity等属性的父元素中时，会形成新的堆叠上下文，导致组件被限制在父容器的图层内。解决此类“元素被困”问题，主要有几种方法：重构HTML结构，将组件移出问题父元素；调整父容器的z-index值，使其高于遮挡元素；在React/Vue等框架中，使用Portal将组件渲染到DOM树外层，从而脱离原有上下文。此外，使用`isolation: isolate`可以创建隔离的堆叠上下文，便于管理如负z-index装饰元素的层叠关系，且副作用最小。理解这些机制有助于开发者避免无意的层叠错误，并有效控制元素的渲染顺序。