-
z-index不生效的常见原因包括元素未定位、层叠上下文限制及z-index值相同。1.元素必须设置position为relative、absolute、fixed或sticky，否则z-index无效；2.不同层叠上下文中的元素，其堆叠顺序由各自上下文在父级中的层级决定，子级z-index再高也无法突破父级上下文；3.同一层叠上下文中z-index相同则后渲染的元素覆盖前者。排查时应检查元素是否定位、查看祖先元素是否创建了层叠上下文（如opacity小于1、transform、filter等属性），并逐
-
z-index对float元素无效是因为只有定位元素（position非static）才能创建层叠上下文，浮动元素需配合position:relative等才能使z-index生效。
-
HTML开发与PD快充毫无关系，因其仅负责页面结构描述，不访问硬件电源模块、不参与USBPD协议协商；navigator.getBattery()仅可读取电池状态，无法控制充电。
-
答案：使用CSSGrid创建响应式卡片布局，通过display:grid和repeat(auto-fit,minmax(250px,1fr))定义自适应列，结合gap设置间距，利用border-radius、box-shadow和transform实现卡片样式与悬停效果，HTML结构清晰，配合object-fit:cover确保图片比例，整体布局美观且适配多屏。
-
点击按钮无缩放动画是因为未声明transition，需在默认状态添加transition:transform0.15sease；:active中仅写transform无效，且scale建议用0.95避免消失和可访问性问题。
-
盒模型决定元素实际占用空间，如width:300px;padding:20px;border:1px在content-box下占宽342px；外边距穿透和collapse导致对齐失效；flex/grid中盒模型仍参与总尺寸计算；块级与行内元素盒模型行为迥异。
-
浏览器右键“另存为”仅保存HTML文档本身，不包含CSS、JS、图片等外部资源，导致样式错乱、功能失效；Chrome/Edge默认保存为“Webpage,Complete”但受限于同域和静态资源，Firefox默认仅保存HTML；curl/wget适用于获取原始HTML源码，Puppeteer可保存JS渲染后的完整DOM。
-
pointer-events:none使元素在指针事件中“不可见”，事件直接穿透至下层可响应元素；它不影响视觉、伪类、focus（需额外处理），且适用于任意元素。
-
本文详解如何在Nuxt2+CompositionAPI项目中，根据API返回的has_purchased字段自动设置复选框（checkbox）的初始选中与禁用状态，确保已购商品默认勾选且不可修改。
-
最稳妥的文字大小设置方式是用rem单位，需配合根元素font-size和viewportmeta标签；px适合像素级微调但不适用于正文；em和%易因嵌套失控，应慎用。
-
React的useState是异步更新的，调用setContent后状态不会立即生效，而是在下一次组件重渲染时才反映新值；因此在set调用后立刻console.log(Content)会输出旧值，而非刚设置的数据。
-
用$spacersmap配@each生成边距工具类，键为语义名、值为带单位长度；margin/padding应分层map管理；响应式按需生成，方向控制用嵌套$sidesmap，单位须统一且注明约束。
-
grid-column-gap仅控制列间间距，不处理容器左右外边距；需配合padding实现视觉等距，推荐用gap+padding+auto-fit响应式布局。
-
css-vars-ponyfill是IE下支持CSS自定义属性的最可行方案，它在运行时解析并替换var()，支持嵌套、calc()内使用、动态更新及媒体查询作用域，但需注意IE对calc()+var()的兼容限制和动态更新时需显式触发重计算。
-
最可靠方案是部署到GitHubPages、Vercel或Netlify获取HTTPS链接；file://仅限本机，HTTP本地服务需同局域网且不支持HTTPS功能，微信/QQ等App会拦截非HTTPS链接。
