卡片堆叠不必须用 position: absolute；本质由层叠上下文和 z-index 控制，position: relative 等也能触发，但 z-index 对 static 无效，且父子层叠上下文会隔离 z-index 作用域。
卡片堆叠必须用 position: absolute 吗？
不是必须。堆叠本质靠层叠上下文（stacking context）和 z-index 控制，position: absolute 只是常见触发方式之一。只要元素建立了层叠上下文（比如 position: relative、position: fixed、opacity: 0.99、transform: translateZ(0)），就能用 z-index 控制顺序。
但要注意：z-index 对 position: static（默认值）完全无效 —— 这是最常踩的坑。
-
position: relative+z-index更安全：不脱离文档流，不影响布局，适合微调卡片前后关系 -
position: absolute会脱离文档流，需手动控制top/left定位，否则所有卡片会叠在父容器左上角 - 若父容器没设
position: relative，absolute子元素会相对于最近有定位的祖先定位；没有则相对于body
z-index 数值越大就越“在前”？
只在同一个层叠上下文中成立。一旦父元素创建了新的层叠上下文（例如设置了 z-index 且 position 不为 static），子元素的 z-index 就只在该父级内部生效，无法越过父级去和外部兄弟元素比高低。
典型翻车场景：
立即学习“前端免费学习笔记（深入）”；
- 卡片 A 的父容器
z-index: 10，卡片 A 自身z-index: 999 - 卡片 B 的父容器
z-index: 20，卡片 B 自身z-index: 1 - 结果：B 整体盖在 A 上面 —— 因为父级层叠顺序已决定，子级再高也出不去
所以堆叠设计要分层管理：要么统一由同一级容器控制所有卡片的 z-index，要么确保父容器不意外创建新层叠上下文（比如避免给父容器加 transform 或 opacity）。
