伪元素叠加需父容器设 position: relative，否则 z-index 失效；伪元素须设 position: absolute + z-index；背景透明用 rgba() 而非 opacity；定位优先用 transform: translate()；尺寸推荐 vmin/vw/em；伪元素需显式宽高以确保 transform 百分比生效。
伪元素叠加必须设 position: relative 在父容器上
不加这句，::before 和 ::after 的 z-index 全部失效，浏览器按文档流顺序渲染——后声明的伪元素盖住前声明的，视觉上就是“第二层消失”。这不是 bug，是 CSS 规范行为。
常见错误写法：div::before { position: absolute; z-index: 2; }，但父 div 没设 position，结果所有伪元素都脱离不了普通流层级，z-index 形同虚设。
- 父容器必须显式设
position: relative（哪怕不偏移） -
::before和::after都要设position: absolute+z-index - 若需第三层，可再嵌一个子
div，或用同一元素的两个伪元素 + 一个真实子元素，三者分别设不同z-index -
z-index值只要大小关系正确即可，比如1/99/200比1/2/3更不容易被意外继承覆盖
透明度别用 opacity，改用 rgba() 控制单层背景
opacity 是作用于整个元素及其所有子内容的，一旦设了，伪元素里如果还放文字或图标，也会一起变透；多层叠加时还会发生透明度相乘（两层 opacity: 0.5 → 实际透出 0.25），颜色发灰、层次模糊。
真正可控的做法是：只在 background-color 或 background-image: linear-gradient() 里用 rgba(r, g, b, a)，alpha 通道只影响该层背景，不影响叠层逻辑。
- ✅ 推荐：
background: rgba(0, 0, 0, 0.1)或background: linear-gradient(rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2)) - ❌ 避免：
opacity: 0.2放在伪元素上 - ⚠️ 父容器也别设
opacity，它会把所有子层一起压暗，直接破坏层叠意图
定位优先用 transform: translate()，少用 top/left
固定像素值如 top: -20px 在小屏下极易跑出视口；百分比如 left: 50% 又依赖容器尺寸，缩放时失真。问题不在“怎么调位置”，而在于“用什么基准定位”。
transform 是相对于自身锚点的位移，不受父容器尺寸变化干扰，响应式更稳。
- ✅ 替代写法：
transform: translate(-50%, -50%)（居中）、translateX(2vmin)（微调） - 尺寸尽量用
vmin、vw或em，例如圆形装饰：width: 8vmin; height: 8vmin - 给父容器加
overflow: hidden防止伪元素溢出干扰布局；调试时可临时改成visible查看真实范围
多层伪元素在响应式下错位？检查是否混用了单位和锚点
错位往往不是代码写错，而是单位语义冲突：比如一个伪元素用 top: 10px，另一个用 transform: translateY(-1rem)，两者基准不同（一个是父容器边框，一个是自身内容盒），缩放时偏移量不再同步。
更隐蔽的问题是：伪元素默认没有尺寸，transform 的 50% 是按其自身宽高算的——如果没设宽高，就按 0 计算，translate(-50%, -50%) 就没效果。
- 确保每个伪元素都有明确的
width/height（哪怕0），否则transform百分比无效 - 全链路统一单位：要么全用
vmin/vw，要么全用em/rem，避免 px 与相对单位混用 - 不要依赖伪元素自动撑开父容器高度——父容器高度需显式设定或由其他内容撑起
position: relative」和「伪元素没设宽高导致 transform 百分比失效」这两处，调试时先盯死这两个地方。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
