做背景图叠文字、海报 Banner、图片上加文案时,很多人会先想到 position: absolute。问题是文案一变长、宽度一变化,就很容易开始写死 height、补媒体查询,越改越累。
这期用一个真实的文字叠加背景海报例子,讲清楚什么时候这是布局问题,什么时候才是定位问题,以及为什么这个场景更适合用 CSS Grid / Grid Stacking。
🔥 本期核心看点
✅ 为什么 absolute 会让父容器感知不到文字高度
✅ 如何判断“布局问题”和“定位问题”
✅ 用 CSS Grid 让背景和文字重叠,但仍然参与尺寸计算
✅ 用 min-height 和 align-self 做出更稳定的响应式海报
💡 视频空降时间坐标请看置顶评论