-
z-index无效是因为元素未定位（position:static默认值），必须配合position:relative/absolute等才生效；父容器设opacity、transform等会创建新层叠上下文，使子元素z-index仅在内部有效。
-
height:100%在fixed元素上失效是因为其相对于初始包含块计算且受父容器和定位上下文干扰；应改用top:0+bottom:0填满视口，并设置overflow-y:auto确保滚动。
-
可以，但需排除中断因素；常见问题包括隐式重置、fill-mode未设、关键帧不全、overflow裁剪、direction交替误判等，且需注意性能与SSR跳变风险。
-
structuredClone()是现代JavaScript中最直接、安全的深拷贝方案，原生支持Map、Set、Date、RegExp等复杂对象，能完整保留结构和键值类型并递归克隆嵌套内容；但不支持函数、undefined、Symbol作键，也不支持WeakMap/WeakSet，且需注意浏览器兼容性。
-
HTML返回顶部功能失效主因是scrollTo或锚点跳转未触发平滑滚动、目标元素不可见或ID缺失；需确保scroll-behavior:smooth声明、目标元素有可见id且位于body开头、事件在DOM挂载后绑定。
-
真正可持续的分离是HTML只管结构、CSS只管表现、JS只管行为，三者物理隔离；style标签和内联style属性虽非错误，但会严重削弱维护性、缓存效率与协作效率，仅允许极少量关键首屏CSS内嵌且须显式声明media属性。
-
通过设置:hover伪类和transition属性可提升按钮交互效果。1.为按钮悬停状态设置更明显的背景色与文字色对比；2.添加transition使颜色变化平滑；3.结合边框、阴影和缩放增强反馈，确保视觉差异清晰且过渡自然，提升用户体验。
-
JavaScript模块加载器本质是解决浏览器端无法原生按需、异步、有依赖地加载代码的问题；require.js作为AMD代表填补了ES6前的空白，而ES6模块是语言级标准，已被现代浏览器和Node.js原生支持，静态分析、实时绑定、动态import等特性使其取代require.js成为主流。
-
Webpack是一个静态模块打包器，从入口文件递归解析import/require等模块依赖，输出浏览器可运行的bundle；需通过loader（如css-loader、style-loader）和plugin扩展能力，不直接编译或压缩资源。
-
CSSStyleSheet构造函数是用于创建可复用样式表对象的API，但截至2024年底仍属实验性功能，仅Chromium系浏览器在开启实验标志后部分支持，Safari和Firefox完全不支持，直接调用newCSSStyleSheet()会抛出TypeError，生产环境应使用style元素的sheet属性安全获取真实CSSStyleSheet实例。
-
onkeydown是在用户按下任意物理按键的瞬间触发的事件，此时input.value尚未更新，也不等输入法上屏，因此不适合做内容校验或字数统计，而适合拦截功能键。
-
top:50%移动的是元素左上角到父容器垂直中线，导致整体偏下；需配合left:50%和transform:translate(-50%,-50%)才真正居中，且父容器须设position:relative。
-
预渲染需服务端生成含真实数据的HTML或构建时静态生成，而非linkpreload；验证标准是HTML响应体直接包含真实内容而非空容器。
-
Tailwind阴影不明显主因是预设值在特定上下文（如白底卡片）中对比度不足；应优先调整透明度而非仅增大模糊值，配合深色模式适配、移动端限制模糊半径、正确使用@layerutilities及DevTools验证渲染。
-
IntersectionObserver实现懒加载与无限滚动的核心是提前适量加载：图片通过rootMargin预留缓冲区预加载，无限滚动用sentinel元素在临界点触发；需合理配置阈值、及时销毁监听、降级兼容并协调二者触发时机。
