因为绝对定位元素参照最近已定位祖先，若父容器未设position: relative，它会回退至body定位，导致图文错位；必须为父容器显式添加position: relative才能使其成为定位上下文。
为什么用 position: absolute 容易让图文错位
直接给图片子元素加 position: absolute，却忘了父容器没设 position: relative，结果元素飞到页面顶部或 body 边缘——这是最常见错位根源。绝对定位的参照物是最近的已定位祖先（position 值为 relative、absolute、fixed 或 sticky），不是父 <div> 本身。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 卡片容器必须显式设置
position: relative - 图片作为背景图时，推荐用
background-image而非<img>标签，避免额外 DOM 层级干扰定位 - 文字层和遮罩层统一用
absolute，并通过z-index控制叠放顺序：遮罩层（z-index: 1）→ 文字（z-index: 2）
渐变遮罩写法：用 linear-gradient 覆盖图片但保留文字可读性
很多人用纯黑半透明色块（如 rgba(0,0,0,0.5)）当遮罩，结果文字在亮图区域依然发灰、对比度不足。真正可用的遮罩得兼顾视觉层次与可读性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层用伪元素
::before实现，避免多一层 HTML；CSS 中写background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.7)); - 角度选
180deg（从上到下渐变），让顶部浅、底部深，把标题放在上方时更清晰 - 不要用
opacity降低整个遮罩层透明度——它会让文字也变淡；应调rgba()的 alpha 值控制颜色浓度
响应式下 absolute 卡片文字跑偏怎么办
固定写死 top: 20px; left: 30px 在手机屏上大概率溢出或压住图片主体。绝对定位本身不响应，必须靠其他手段补救。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 文字层用
inset替代单边偏移：inset: 1rem auto 1rem 1rem，配合max-width: 80%防溢出 - 关键文字（如标题）加
text-overflow: ellipsis和white-space: nowrap，防止长标题撑破卡片 - 图片容器高度设为
aspect-ratio: 4/3或用padding-top: 75%+position: absolute内容居中，比单纯height更稳
IE11 兼容时 linear-gradient 遮罩失效
IE11 不支持现代 linear-gradient 的 rgba() 写法，会直接忽略整条声明，导致遮罩消失——不是 bug，是语法不识别。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 降级写法：用 IE 支持的十六进制带透明度格式，例如
background: linear-gradient(to bottom, #000000, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#b3000000'); - 更稳妥做法是放弃 IE11 的渐变，改用单色半透遮罩 + 字体加粗/描边提升可读性，毕竟真实场景中 IE11 用户极少主动点开卡片详情
- 若项目强制兼容，建议用 PostCSS 插件
autoprefixer+postcss-cssnext自动补全旧语法，而非手写
absolute、哪里该交还给文档流”——比如卡片标题下的描述文本，强行绝对定位反而破坏阅读节奏，不如用 margin 和 flex 布局来得自然。 
