父容器必须设position: relative才能精准对齐倒影；倒影top用100%而非像素值，配合transform: scaleY(-1)翻转；发光用filter: blur() + opacity更可控，box-shadow易断裂；z-index冲突需检查stacking context，推荐倒影与原图同级定位；高对比度模式下需@media兜底关闭blur。
倒影元素怎么用 position: absolute 精准对齐原图底部
绝对定位的倒影容易偏移或错位，根本原因是没切断文档流后重新锚定参考点。父容器必须设 position: relative，否则 top 和 left 会相对于视口计算。
- 父容器加
position: relative是硬性前提，不加就永远对不齐 - 倒影元素的
top值建议用100%而非固定像素，避免高度变化时脱节 - 用
transform: scaleY(-1)翻转比手动调top更可靠，且不依赖原始高度值 - 如果原图带
border-radius或overflow: hidden，倒影也要同步设置，否则边缘露白
发光效果靠 filter 还是 box-shadow？选哪个更可控
box-shadow 只作用于元素轮廓，对翻转后的倒影常出现“光晕断裂”；filter: blur() + opacity 才能模拟真实渐变衰减的发光感。
- 别用
box-shadow: 0 10px 20px #00f给倒影——它不会随翻转变形，光晕方向反了 - 正确组合是：
filter: blur(8px) brightness(1.5)，再配opacity: 0.6 -
blur()值超过 12px 在 Safari 中可能触发渲染降级，iOS 上尤其明显 - 如果要兼容老版 Edge，得加前缀
-webkit-filter，但仅限于blur和opacity
mix-blend-mode 在倒影里基本没用，别硬套
很多人想用 multiply 或 screen 让倒影和背景混合出“透光感”，实际几乎无效：倒影是独立图层，又没半透明底色，blend 模式找不到可混合的下层像素。
- 除非你把倒影和背景强制塞进同一个 stacking context（比如都包在
isolation: isolate容器里），否则mix-blend-mode对倒影无反应 - 即使生效，
screen会让深色背景下的倒影直接消失，multiply则让浅色区域发灰 - 真要氛围感，不如直接调
background: radial-gradient(...)模拟地面散射光
层级（z-index）冲突导致倒影被遮挡怎么办
倒影被其他元素盖住，不是 z-index 设太小，而是 stacking context 搞错了。父容器一旦有 transform、opacity 或 <code>filter，就会创建新层叠上下文，把倒影锁死在里面。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否意外带了
filter（比如用了blur做毛玻璃），它会截断z-index透传 - 倒影元素自身加
z-index: -1没用——它只在父容器的 stacking context 内比较 - 稳妥做法：把倒影提到和原图同级，用兄弟节点 +
position: absolute控制，避开父级 context 限制 - 若必须嵌套，父容器加
isolation: isolate，再给倒影设更高z-index
最麻烦的其实是高对比度模式（Windows）或强制色彩反转（macOS）下，filter: blur 会失效或变色，这时候发光直接没了——得用 @media (prefers-contrast: high) 单独关掉 blur，保留 opacity 降级兜底。
