z-index 本身不能突出显示推荐套餐，需配合 position、视觉样式及响应式断点；错误写法因 static 定位和层叠上下文截断而失效；正确做法是设 position: relative + z-index + transform/scale/阴影，并在小屏用 display: none 或 visibility: hidden + opacity: 0 配合 z-index: -1，同时注意 safari 兼容性与合成层隔离。
z-index 本身不能“突出显示推荐套餐”，它只决定谁盖在谁上面；真正起作用的是 position + z-index + 视觉样式组合，且必须配合响应式断点逻辑，否则在小屏下会失效甚至遮挡内容。
为什么直接给推荐项加 z-index: 999 没用
常见错误是这样写：
@media (max-width: 768px) {
.plan-recommended {
z-index: 999;
}
}
——完全无效。原因有三：
-
.plan-recommended默认是position: static，z-index对它不生效 - 父容器可能意外创建了层叠上下文（比如加了
opacity: 0.99或transform: translateY(0)），把子元素的z-index截断了 - 移动端触摸区域变小，高
z-index的元素若没留足够点击空间，反而导致交互失败
正确做法：先激活定位，再分层控制
推荐套餐要“浮出”并视觉强化，得走两步：先让它脱离文档流可叠放，再用 z-index 确保层级优先。示例结构：
<div class="pricing-grid"> <div class="plan basic"></div> <div class="plan recommended"></div> <div class="plan premium"></div> </div>
关键 CSS：
- 给
.pricing-grid设position: relative（建立层叠上下文根） - 给
.recommended设position: relative（不是absolute，避免破坏 Flex/Grid 布局） - 加
z-index: 2，同时配transform: scale(1.03)和轻微阴影增强“浮出感” - 其他套餐统一设
z-index: 1，形成明确层级差
响应式切换时，别只调 z-index
小屏下常需折叠非推荐项、放大推荐项宽度。这时仅靠 z-index 不够，容易引发点击穿透或焦点错乱：
- 用
display: none隐藏非推荐项（彻底移出渲染流），比靠z-index压到后面更可靠 - 若需保留占位做动画过渡，改用
visibility: hidden+opacity: 0，再配合z-index: -1（此时必须有position） - 务必检查移动端
touch-action是否被覆盖层阻断，必要时给推荐项加touch-action: manipulation
容易被忽略的兼容性坑
z-index 在 Safari 和旧版 Android WebView 中行为不稳定，尤其当父容器用了 will-change: transform 或 backface-visibility: hidden 时：
- 避免在推荐项上同时使用
z-index和transform: scale()—— Safari 可能忽略z-index - 测试真机时重点看 iOS 16+ 的 WebKit 渲染，它对层叠上下文的判定比 Chrome 更严格
- 如果推荐项含 SVG 或 Canvas，它们默认在独立合成层，
z-index可能无法跨层控制，得用isolation: isolate显式隔离
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
