磨砂卡片堆叠不能只靠z-index，必须配合negative margin（如margin-top: -12px）实现错落位移，同时统一设position: relative确保z-index生效；磨砂效果须用backdrop-filter而非filter: blur()，并配合@supports渐进增强兼容性。
磨砂卡片堆叠为什么不能只靠 z-index
单纯设置 z-index 只能控制层叠顺序，但无法让上层卡片“压住”下层的边缘——视觉上还是平铺的，没有物理堆叠感。真正实现「错落叠加」必须配合位移，而 negative margin（比如 margin-top: -12px）是最直接、最可控的位移方式。它不触发重排（相比 transform: translateY() 在某些旧浏览器中可能影响 z-index 分层），也不依赖父容器 position 上下文（不像 top 那样要求 position: relative/absolute）。
常见错误现象：z-index 设了但卡片还是上下对齐、毫无堆叠；或者用了 transform 位移后，上层卡片阴影被下层裁切（因 transform 创建新层叠上下文，打乱原有 z-index 关系）。
- 堆叠间距用
margin-top: -Xpx控制，推荐-8px到-16px，太大易露白边，太小看不出层次 - 所有卡片需统一设置
position: relative，确保z-index生效（否则非定位元素z-index无效） - 避免给父容器设
overflow: hidden，否则负 margin 部分会被裁掉
磨砂效果必须用 backdrop-filter，不是 filter
backdrop-filter 作用于元素「背后区域」的模糊，是实现毛玻璃（frosted glass）效果的唯一标准属性；而 filter: blur() 是模糊元素自身，会导致文字发虚、图标失真，完全不可用。
使用场景：卡片背景需半透明（如 background-color: rgba(255,255,255,0.6)），且父容器有可穿透的内容（比如带纹理的 body 背景图或渐变），backdrop-filter 才能生效。纯色背景+ backdrop-filter 看不出区别。
- 必须加前缀兼容：
-webkit-backdrop-filter: blur(12px)，Safari 9+/Chrome 76+ 支持，Firefox 默认禁用（需用户手动开启layout.css.backdrop-filter.enabled） - 性能敏感：模糊半径别超过
20px，否则滚动卡顿，尤其在移动设备 - 和
border-radius搭配时，圆角内侧模糊更自然，建议同步设置border-radius: 16px
堆叠顺序与 z-index 数值怎么设才不翻车
多个卡片堆叠时，z-index 必须严格递增，且间隔足够大（比如 +10），避免被其他组件的 z-index（如弹窗常设 1000+）意外覆盖。更稳妥的做法是用 CSS 自定义属性统一管理：
.card:nth-child(1) { --z: 10; margin-top: 0; }
.card:nth-child(2) { --z: 20; margin-top: -12px; }
.card:nth-child(3) { --z: 30; margin-top: -12px; }
.card { z-index: var(--z); position: relative; }
容易踩的坑：z-index 值为 auto 或 0 的卡片，在同层叠上下文中会按 HTML 顺序覆盖（后写的盖前面的），但一旦父容器有 z-index，子元素的 z-index 就只在该父容器内部比较——所以务必确认卡片是否在同一层叠上下文里。
- 不要用
z-index: 1、2这种小数值，留足余量应对后续弹窗、导航栏等高优先级元素 - 如果卡片是动态渲染（如 React 列表），确保每个
key对应唯一顺序，避免重排后z-index错乱 - 检查是否有父元素设置了
transform或will-change，它们会隐式创建新层叠上下文，隔离子元素的z-index
移动端适配和 Safari 的几个硬伤
iOS Safari 对 backdrop-filter 支持不稳定：iOS 13+ 支持，但开启页面缩放或键盘弹出时，模糊效果可能消失；部分 iPadOS 版本还会导致 position: fixed 卡顿。这不是代码问题，是渲染引擎限制。
解决方案不是妥协，而是渐进增强：先做无模糊的半透明白卡 + 负 margin 堆叠，再用 @supports 加载磨砂效果：
.card {
background: rgba(255, 255, 255, 0.6);
margin-top: -12px;
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
.card {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
}
- Android Chrome 76+ 支持良好，但低端机开启模糊后滑动掉帧，建议加
will-change: transform提前提示合成层 - Safari 中若卡片内容含
video或iframe，backdrop-filter可能失效，需用pointer-events: none隔离交互层 - 绝对不要在
:hover中切换backdrop-filter，Safari 会闪屏
最麻烦的其实是设计一致性：负 margin 堆叠后，顶部卡片的阴影（box-shadow）容易被下层遮挡，得手动调大 shadow 的 spread-radius 或改用 filter: drop-shadow() 绕过层叠限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
