父容器必须设position: relative，否则绝对定位文字会向上寻找定位祖先直至body，导致飘到左上角；正确做法是给图片外层div（如.card）设relative，img保持流式布局。
transform:translateY 升起文字时，父容器必须设 position: relative
文字升起来却飘到页面左上角？不是 transform 写错了，而是遮罩层没找对定位参照物。绝对定位的标题容器（比如 .overlay 或 figcaption）必须放在一个 position: relative 的父元素里，否则它会向上逐级找最近的相对/绝对定位祖先，甚至落到 body 上。
常见错误写法：img 自己加 position: relative —— 它是替换元素，默认不撑开父容器高度，且后续 transform 动画可能被截断。
- 正确做法：给图片外层包裹的
div（如.card、.item、figure）设position: relative -
img保持默认流式布局，或仅设display: block消除基线间隙 - 升起的文字容器用
position: absolute+bottom: 0起始位置，再通过transform: translateY(100%)隐藏，:hover时改为transform: translateY(0)
升起动画卡顿或闪动？transition 必须包含 transform
只写 transition: opacity 0.3s，文字在 Safari 或旧版 Chrome 上容易“抽搐”或延迟响应——因为浏览器没触发 GPU 加速，重绘压力大。
transform 属性本身不触发重排，但若过渡声明里没包含它，哪怕你只改了 translateY，浏览器也可能退回到 CPU 渲染管线。
- 必须写全：例如
transition: transform 0.3s ease, opacity 0.3s ease - 即使初始
opacity: 1不变，也建议加上，避免某些渲染器优化误判 - 可额外加
will-change: transform到文字容器，但仅在必要时（如频繁悬停），否则可能引发内存开销
升起后文字被裁剪或显示不全？检查 overflow 和 height
文字从底部升起，结果只看到一半？大概率是父容器设置了 overflow: hidden，或者图片容器本身高度塌陷，导致绝对定位的升起区域被截断。
特别是用 flex 或 grid 布局图片列表时，外层容器若没显式高度，bottom: 0 + transform 就会失效。
- 临时加
outline: 1px solid red检查父容器是否真有渲染高度 - 确保图片容器（如
.card）有明确尺寸：用height: 100%、aspect-ratio或固定值 - 避免在
figure或卡片根元素上设overflow: hidden，除非你确定要裁剪图片——升起文字需要溢出空间 - 升起容器自身建议设
width: 100%，否则文字可能只在局部宽度内升起
移动端点击穿透或升起不触发？别只信 :hover
iOS Safari 和安卓 Chrome 对 :hover 支持极弱：第一次轻触才模拟 hover，第二次才真正触发，且常伴随点击穿透（点到背后链接）。
纯 CSS 方案无法绕过触摸事件机制，但可通过补全伪类 + 层级控制缓解：
- 给升起容器加
pointer-events: none初始态，:hover和:active同时设为pointer-events: auto - 确保其
z-index足够高（如z-index: 10），且父容器无transform或opacity 导致新堆叠上下文截断 - 更稳妥的做法：把整个卡片（
.card或figure）设为链接，而非仅图片或文字——这样轻触任意位置都可跳转，升起只是视觉反馈
最易被忽略的一点：升起动画依赖于起始位置的精确计算。transform: translateY(100%) 是相对于自身高度移动，但如果文字容器内部有 padding、line-height 或未重置的默认 margin，实际位移量就会偏移。动手前先用开发者工具勾选 “layout” 查看盒模型，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
