透明颜色不改变层叠顺序，z-index生效需元素形成层叠上下文且为定位元素；rgba/hsla可局部控制透明度，opacity则影响整个元素及其子树。
透明颜色本身不会改变元素的层叠顺序，z-index 是否生效，取决于该元素是否形成了「层叠上下文」或「定位上下文」——这是绝大多数人误以为“设了透明色就能压住别的元素”的根本原因。
透明颜色怎么写：RGBA 和 HSLA 是最稳妥的选择
HTML/CSS 中没有“透明颜色代码”这种独立语法，透明度必须依附于颜色模型。直接用 opacity 会影响整个元素及其子元素，而 rgba() 或 hsla() 只作用于单个颜色属性（如 background-color、color），更可控。
-
rgba(0, 0, 0, 0.5)表示半透黑色背景，不影响子元素文字或边框的不透明度 -
hsla(200, 100%, 50%, 0.3)同理，适合需要色相/饱和度调节的场景 - 避免用
opacity: 0.5实现局部透明——它会让整个 DOM 子树都变淡，且会强制创建层叠上下文，干扰z-index布局
z-index 生效的前提：必须是定位元素
z-index 对 static 定位（默认值）的元素完全无效。哪怕你写了 z-index: 999，只要没加 position: relative / absolute / fixed / sticky，就等于没写。
- 常见错误：
div { background-color: rgba(0, 0, 0, 0.4); z-index: 10; }→ 这里z-index被浏览器忽略 - 正确写法：
div { position: relative; background-color: rgba(0, 0, 0, 0.4); z-index: 10; } - 如果父容器有
transform、filter、will-change等属性，也可能隐式创建层叠上下文，导致子元素的z-index相对父级生效，而非全局文档流
透明层叠时的常见冲突：背景透明 ≠ 元素可穿透点击
一个 rgba() 背景的遮罩层（overlay），即使设了 z-index 高于底层按钮，也不代表你能“透过它点到底层”。默认情况下，它仍是可阻挡鼠标事件的实体层。
立即学习“前端免费学习笔记（深入）”；
- 若需点击穿透（比如做视觉提示但不拦截交互），加
pointer-events: none - 但注意：
pointer-events: none会让整个元素（包括其子元素）失去响应；如果遮罩里还有关闭按钮，得单独给按钮设pointer-events: auto - 另一个陷阱：用
opacity: 0隐藏元素时，它仍占据文档流且能响应事件；而visibility: hidden会隐藏但保留空间，且子元素也继承不可见；真正移除交互影响的是display: none
真正决定谁在上面的，从来不是透明度数值，而是层叠上下文的嵌套结构和定位层级。调 z-index 前，先用浏览器开发者工具的「Layers」面板或勾选「Paint flashing」，确认你操作的元素是否真的处于预期的层叠上下文中。
