用z-index配合css自定义属性（--page-index）动态控制翻页层叠顺序最可靠，可避免dom顺序与视觉层级错位导致的“穿帮”、错层问题，并规避js反复操作style及层叠上下文断裂风险。
直接说结论：用 z-index 配合 CSS 自定义属性（--page-index）动态控制翻页时的层叠顺序，比硬写 z-index: 10 / z-index: 9 更可靠，也避免 JS 反复操作 style。
AI一键生成成品PPT☜☜☜☜☜点击生成；
为什么翻页时内容会“穿帮”或错层
常见现象是：翻页动画进行到一半，下一页突然从上一页底下钻出来，或者两页同时可见但遮挡关系反了。本质是浏览器按 DOM 顺序渲染，而翻页动画依赖视觉层叠（z-index），两者没对齐。
- DOM 顺序固定，但翻页需要「当前页在最上、下一页次之、再下一页最底」的动态层级
- 只靠
transform: rotateY()不改变层叠上下文，z-index必须显式设置 - 如果所有页都设
position: absolute但z-index相同，就按 HTML 顺序叠——这和翻页逻辑冲突
用 CSS 变量驱动 z-index 的实际写法
核心是把页码索引映射为可计算的 z-index 值，且支持动画过渡（虽然 z-index 本身不支持过渡，但可通过 class 切换触发重排）。
- 给每页加
data-index="0"、data-index="1"等标记 - 在 CSS 中用属性选择器绑定变量：
[data-index="0"] { --page-z: 10; }，[data-index="1"] { --page-z: 9; } - 统一设置
z-index: var(--page-z);，并确保父容器有position: relative - 翻页时，JS 只需切换当前页的
data-index值（比如从"0"改成"1"），CSS 自动重算z-index
示例片段：
`.book { position: relative; }
.page { position: absolute; width: 100%; height: 100%;
z-index: var(--page-z, 0);
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-index="0"] { --page-z: 10; }
[data-index="1"] { --page-z: 9; }
[data-index="2"] { --page-z: 8; }`
容易被忽略的层叠上下文陷阱
即使 z-index 数值正确，也可能因层叠上下文断裂导致失效。翻页容器里最容易踩坑的是：
-
transform、opacity 、<code>will-change会创建新层叠上下文，使子元素的z-index只在该上下文内生效 - 如果翻页页签用了
transform: rotateY(180deg)，又同时设了opacity: 0.99，那它的z-index就和兄弟页不在同一层了 - 解决办法：翻页动画期间保持
opacity: 1，用visibility: hidden或clip-path: inset(100%)控制不可见，而非降透明度
响应式翻页时的 z-index 同步问题
移动端横竖屏切换、缩放页面时，如果 JS 用 getBoundingClientRect() 计算位置再手动设 z-index，极易不同步。变量方案的优势在这里凸显：
- CSS 变量是声明式的，浏览器自动响应媒体查询变化
- 可在
@media (max-width: 768px)里重新定义[data-index="0"] { --page-z: 20; }，无需 JS 干预 - 但注意：不要在媒体查询里用
calc(var(--page-z) + 1)，Safari 对变量嵌套 calc 支持不稳定
真正难的不是让某一页“翻上去”，而是让整个翻页链在任意设备、任意缩放、任意交互节奏下，z-index 始终和视觉状态一致——变量驱动是目前最轻量、最可控的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
