抽屉需与导航栏同级并共用堆叠上下文，抽屉设position:fixed+ z-index:1001，导航栏z-index:1000；抽屉用transform:translatex()动画并配合will-change:transform；遮罩层z-index比抽屉小1且pointer-events:auto。
抽屉打开时页面内容被遮挡，z-index 顺序怎么调？
抽屉层必须盖在主内容之上，但又不能挡住固定定位的头部或底部。常见错误是只给抽屉设 z-index: 1000，结果导航栏消失了——因为 position: fixed 元素默认堆叠上下文独立，z-index 不跨上下文生效。
正确做法是让抽屉和导航栏处于同一堆叠上下文：
- 确保抽屉容器（如
<aside></aside>或<div id="drawer">）与导航栏同级，且父容器没有 <code>transform、opacity等触发新堆叠上下文的属性 - 抽屉本身用
position: fixed+top: 0+left: 0，再设z-index: 1001 - 导航栏设
z-index: 1000，主内容区保持z-index: 1或不设 - 给抽屉父容器（如
或一个包裹<main></main>的<div>）加 <code>overflow-x: hidden - 抽屉自身设
flex-shrink: 0防止被压缩 - 关键：抽屉必须有明确
width（如width: 280px），且不能依赖max-width或fit-content—— 否则移动端 translate 后可能回弹错位 - 只用
transform: translateX()+transition: transform 0.3s ease - 避免同时过渡
opacity和transform—— 虽然合法，但某些旧版 WebKit 会降级为软件渲染 - 加
will-change: transform（仅在抽屉激活态设置，避免全局开销） - 移动端务必测试真机：模拟器常掩盖
transform层级问题 - 遮罩层必须和抽屉同级，且
z-index比抽屉小 1（如抽屉z-index: 1001，遮罩z-index: 1000） - 遮罩层设
pointer-events: auto，并绑定click事件关闭抽屉 - 抽屉内部内容区域（如菜单项）需显式设
pointer-events: auto，否则继承遮罩层的none - 避免用
opacity: 0隐藏遮罩——它仍响应事件；应结合visibility: hidden+opacity: 0控制显示/交互
transform: translateX(-100%) 为什么抽屉初始不可见却占空间？
因为 translateX 只改变渲染位置，不脱离文档流。即使抽屉完全移出视口，它仍占据原始宽度（比如 width: 280px），导致页面右侧出现空白或滚动条。
解决方法不是删掉 width，而是配合 overflow: hidden 和布局约束：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
用 transition 做滑入动画，为什么在 iOS Safari 上卡顿？
iOS Safari 对非 transform 和 opacity 属性的 transition 渲染性能差，尤其 left 或 margin-left 会触发布局重排。
必须只对硬件加速属性做过渡：
点击遮罩层关闭抽屉，pointer-events 怎么设才不误触背后元素？
遮罩层（<div class="overlay">）需要拦截点击，但若直接设 <code>pointer-events: none 就失效了；设 pointer-events: auto 又可能因层级或透明度漏点。
稳妥写法：
transform 的堆叠上下文、iOS 的渲染管线、遮罩层的事件穿透，三者叠加时最容易在真机上突然失效——调试时别只看 Chrome DevTools，得连着 Safari Web Inspector 抓 layer 面板看合成层是否被意外拆分。
