必须同时设置position: relative和overflow: hidden才能裁剪::before伪元素，因border-radius不裁剪子级，而overflow: hidden需非static定位上下文才生效。
为什么::before绝对定位会跑出容器
不是伪元素“不听话”，而是它压根没被容器的圆角或边界约束——border-radius只影响元素自身绘制区域，不自动裁剪子级或伪元素；只要::before用了position: absolute且偏移值（如top: -5px）超出父元素内边框，它就会视觉上“破框”。
overflow: hidden必须和position: relative配对才生效
单独加overflow: hidden没用，因为浏览器需要一个明确的「包含块」来定义裁剪范围。而这个包含块，必须由position: relative（或其他非static值）显式创建。
- 父元素没设
position: relative→::before往上找最近已定位祖先，可能落到body，裁剪完全失效 - 父元素有
position: relative但没加overflow: hidden→ 定位参考有了，但无裁剪行为 - 父元素同时有
position: relative和overflow: hidden→ 裁剪才真正作用于::before渲染区域
伪元素尺寸和偏移必须适配父容器内边距
position: relative只是建了个坐标系，不改变::before默认尺寸逻辑。它仍按自身内容撑开，容易溢出。
-
top: 0; left: 0; width: 100%是基础，但若父容器有padding，需用right: 0; bottom: 0或inset: 0更稳妥 - 避免用
transform: translate()微调位置——它会创建新层叠上下文，导致overflow: hidden裁剪失效 - 长文本场景下，
width: max-content配合max-width: 100%比单纯width: 100%更安全（IE全系不支持max-content）
移动端position: fixed和overflow: hidden天然冲突
iOS Safari 和部分安卓 WebView 中，position: fixed元素（哪怕写在::before里）会脱离普通文档流，直接无视父级overflow: hidden——这不是 bug，是渲染机制限制。
- 固定定位伪元素无法被父容器裁剪，哪怕父容器有
position: relative - 这类需求（如吸底提示、返回按钮）应直接挂到
body下，不要嵌套在带overflow: hidden的容器里 - 如果必须动态生成，优先用
position: absolute+ JS 计算视口位置，而非fixed
::before跑出圆角，第一反应去调z-index或改top值，却忘了检查父元素有没有position: relative——它不报错，也不警告，就安静地让裁剪失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
