如何用CSS变量管理z-index层级-css教程-PHP中文网

z-index: var(--z-modal)无效的首要原因是元素未设置非static定位；必须设为relative、absolute、fixed或sticky才能激活z-index，否则变量再正确也无用。

如何用css变量管理z-index层级

z-index: var(--z-modal) 为什么没效果

写了变量却没生效，90% 是因为元素根本没资格参与层叠。z-index 只对定位元素起作用，position: static（默认值）下，var(--z-modal) 再正确也白写。

检查开发者工具「Computed」面板：z-index 显示为 auto 或灰掉，说明失效；同时看 position 值是不是 relative、absolute、fixed 或 sticky——缺一不可。

常见误操作：只给父容器设 position: relative，子元素没设定位，z-index 直接被忽略
transform: translateZ(0) 会触发新层叠上下文，把子元素“关”在里面，z-index 只在内部比大小
第三方组件（如 uni-modal）挂载到下，但没设 position，变量就失去统一基准

:root 里定义 --z-modal 不等于全局可用

变量声明位置错了，组件就读不到。<style scoped></style> 里写 :root { --z-modal: 1000; } 是无效的——scoped 会加属性选择器，:root 被锁死在当前组件内。

真正全局生效的写法只有一处：项目顶层非 scoped 的 <style></style> 块中（如 Vue 的 App.vue、React 的 index.css），直接写：

:root {
  --z-base: 0;
  --z-toast: 800;
  --z-dropdown: 900;
  --z-modal: 1000;
  --z-fullscreen: 1500;
}

UniApp 等跨端框架尤其要注意：uni.showToast 渲染的 DOM 在下，如果变量只定义在某个 page 文件里，它完全看不到。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

多个组件共用变量时怎么避免冲突

把所有层级都塞进 :root 容易失控——一个弹窗升级了 --z-modal，结果侧边栏也被顶到前面。更稳妥的是按功能域就近定义：

.modal { --z-element: var(--z-modal, 1000); z-index: var(--z-element); }
.dropdown { --z-element: var(--z-dropdown, 900); z-index: var(--z-element); }
避免在同一个选择器里既声明又使用变量，比如 .card { --z-card: 10; z-index: var(--z-card); }——后续复用就得重复声明

JS 动态提层时必须桥接 CSS 变量：el.style.setProperty('--z-modal', '1050')，Sass 编译后的变量 JS 读不到，不能混用。