1. 为什么会出现卡片层级重叠？
1.1 定位与层叠上下文的关系
定位属性和层叠上下文的关系直接决定了卡片在页面中的显示顺序。当一个元素被设置为 position 的某个值（如 relative、absolute、fixed）时，它会参与一个新的层叠上下文，进而影响同级及父级子孙的显示次序。若多个卡片在同一个上下文中错位叠放，就会出现不可预期的重叠现象。
常见导致层叠上下文创建的条件包括 transform、opacity、filter、perspective、 clip-path、mask 等，这些属性会在元素上触发新的层叠上下文，从而改变 stacking order。再加上父级容器的位移、缩放或视口裁剪，可能让看似同级的卡片其实处于不同的层级域中。
在排查时，应该重点关注父级元素的定位、变换以及不透明度等属性是否把某些卡片拉进了独立的层叠上下文。错误认定“同级比较 z-index”导致的错位往往来自于层叠上下文被分裂，而不是单纯的 z-index 值高低问题。
1.2 常见触发因素
大量组件嵌套和复用会放大层叠复杂度，导致某些卡片被包含在较高的上下文中，另一些则仍在低层级。这种情况下，即便 z-index 值看起来很高，也可能被同域内的其他上游层级压住。
使用专用的组件容器和遮罩层时，常常会引入新的层叠上下文，如弹出框、提示框、下拉菜单、浮动标记等都要考虑它们的父级框是否创建了新的上下文。若处理不当，卡片就会出现“卡在某个容器内”的错位现象。
此外，浏览器渲染差异、框架封装的默认样式以及第三方 UI 库的全局覆盖也可能让原本简单的层级关系变得复杂。在实际排查中，先确认是否存在跨容器的层叠上下文边界，再逐步对比 z-index 的实际效果。
2. 从检查父级层叠上下文开始排查
2.1 理解层叠上下文的形成条件
层叠上下文在 CSS 中是一个独立的排序域，其形成通常与 position、z-index、transform 等属性相关。当一个元素创建了一个新的上下文，子孙元素的层级排序就只能在该上下文内进行。
在实际场景中，父级元素如果触发新上下文，会让子元素的 z-index 只对该父上下文内生效，从而影响整组卡片在页面中的可见层级。理解这一点，是解决“卡片错位叠放”的关键。
为了更直观看到层叠上下文的边界，可以使用浏览器的开发者工具逐层查看父元素的样式，尤其是transform、opacity、filter、clip-path 等可能触发新上下文的属性，以及父级容器的定位情况。
2.2 如何定位造成新层叠上下文的属性
逐层向上检查每个卡片的父级节点，在开发者工具中用“计算样式”面板查看当前节点及其父节点的 z-index、position、transform 等属性，找出触发新上下文的根因。
常见的定位点包括：包含卡片的父容器是否有 transform、opacity、filter 等属性，以及父容器是否有非 static 的 position 值。若父容器自带新上下文，其内部的高 z-index 卡片在视觉上会“被锚定”在该容器内，影响全局叠放关系。
诊断时建议按步骤：先确认卡片所在的直接父级是否创建了新上下文；若有，逐级往上排查，直到找到真正导致层级错乱的根节点；最后再根据定位策略调整或裁剪上下文边界。
3. 统一管理 z-index 的实操指南
3.1 设计一个全局 z-index 标尺
为前端应用设计一个统一的 z-index 标尺，可以显著降低层级冲突的概率，避免在不同组件间随意抬高或降低 z-index。
推荐在项目的全局样式文件中引入一组有意义的命名变量，确保每种组件都遵循相同的排序逻辑。通过使用 CSS 变量，可以在不同主题或模块中灵活替换而不破坏既有关系。
/* 全局 z-index 标尺示例 */
:root {--z-empty: 0; /* 基础层级，用于普通文案等不可交互元素 */--z-card: 100; /* 卡片组件的基础层级 */--z-dropdown: 200; /* 下拉菜单、弹出层的层级 */--z-tooltip: 300; /* 提示层 */--z-modal: 1000; /* 模态框及全屏覆盖 */--z-overlay: 1100; /* 遮罩层，覆盖在模态之上 */
}/* 使用示例 */
.card { position: relative; z-index: var(--z-card); }
.modal { position: fixed; z-index: var(--z-modal); }
.tooltip { position: absolute; z-index: var(--z-tooltip); }
通过统一变量，能快速定位和修改跨页面的层级关系，避免见到一个组件抬高了几十层而另一个又被压下去的情况。
3.2 如何在组件级别隔离层级
为组件设定独立的 stacking context 作用域，可以避免不同组件之间的层级互相干扰。通常做法是在容器上设置 position 与 z-index，并确保其子孙组件的层级只在该容器内生效。
在设计时，尽量让上层容器的层级逐级向上跃升，而非让每个组件都往全局抬高。这种分层策略可以避免“越界放大”的问题，使得层级关系更可控。
为了实现稳定的上下文，建议在必要情况下显式创建新上下文，如对某些卡片或弹出层使用 position: relative 加上一个明确的 z-index，并保持其内部元素的 z-index 在一个封闭区间内。
4. 实操诊断与 Debug 技巧
4.1 浏览器开发工具的用法
浏览器开发者工具是排查层级问题的第一线工具，通过选中目标元素，可以在“样式”或“计算样式”面板中查看 z-index、position、transform 等属性及其层叠上下文情况。
实践中，检查目标元素的 computed style> z-index 的数值是否异常，以及其父级是否创建了新的上下文；必要时，临时将某些属性改为默认值以观察是否恢复了正确的层级。
在排查时也可以通过控制台执行辅助命令，例如查看某元素的层叠上下文信息，以及跨父级的可视排序关系。
// 在控制台快速检查选中元素的层叠上下文相关属性
var el = document.querySelector('.card');
console.log(getComputedStyle(el).position);
console.log(getComputedStyle(el).zIndex);
4.2 示例诊断流程
制定一个简化的诊断流程能提高定位效率：先锁定存在重叠的两个或多个卡片；随后逐级向上查看父级元素，确认是否有创建新上下文的属性；最后对比在同一父上下文内的实际 z-index 值，判断是否需要调整变量或改动结构。
在诊断过程中，记录每一步的变更效果，可以帮助团队快速回溯与复盘。把诊断结果转化为可重复的操作清单，减少未来同类问题的排查成本。
5. 进阶技巧：避免常见坑
5.1 transform/opacity/filters 造成新层叠上下文
这些 CSS 属性会在元素上创建新的层叠上下文，从而把子元素的排序范围局限在该上下文内。滥用它们可能导致看似平级的卡片实际处在不同的排序域里，造成错位。
为避免此类坑，优先在需要视觉变换的组件内单独处理，而非把整页的其他卡片也置于同一上下文中。并确保变换只作用于目标元素本身，而不是把整个容器一并带走。
在遇到必须使用这些属性的场景时，通过明确分层并使用全局 z-index 标尺来约束，减少跨上下文的依赖。
5.2 避免使用大量全局 z-index
大量全局 z-index 的做法易造成不可控的层级错乱，尤其是在大型应用里，随着新组件和页面的增多，维护成本大幅上升。
改进策略是：把 z-index 的提升限制在“必要时才提升”的原则内，并优先调整容器的层级范围，而不是单独给每个浮动元素设高位 z-index。通过变量化和作用域控制，可以更容易地追踪层级的改变。
最终目标是让每个组件在合适的上下文中完成显示，避免出现跨上下文的排序冲突。将层级管理落地为可重复的规范，是避免重复问题的关键。
