本文讲解如何使用绝对定位与相对定位组合，在响应式网格布局中让文字标题精准覆盖于图片上方，并支持悬停显示，适配学校模板限制。

本文讲解如何使用绝对定位与相对定位组合，在响应式网格布局中让文字标题精准覆盖于图片上方，并支持悬停显示，适配学校模板限制。

要在图片上正确叠加标题（尤其是悬停时显示），核心在于建立正确的层叠上下文与定位关系。你当前代码中 .zine 和 .web 元素虽已写在 <figure></figure> 内，但因缺少父容器的 position: relative 声明，导致 position: absolute 的子元素脱离文档流后，以 或最近有定位的祖先为参考进行定位——这正是文字“跑到屏幕中央”的根本原因。

✅ 正确解决方案：两步定位法

1. 为每个 <figure></figure> 设置 position: relative
   使其成为绝对定位子元素的“定位上下文”；
2. 为标题 <div> 设置 <code>position: absolute 并精确定位
   利用 top/left/right/bottom + text-align 实现居中，同时确保悬停时可见（可配合 opacity 或 transform 增强交互）。

   以下是推荐添加到你 CSS 文件末尾（或 <style></style> 标签内）的精简、兼容性强的样式：

   /* 为所有项目图片容器启用定位上下文 */
   section.projects figure {
     position: relative;
     overflow: hidden; /* 防止标题溢出圆角/缩放区域 */
   }
   
   /* 统一处理所有项目标题（.zine, .web 等） */
   section.projects figure div {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-family: Plex-Bold, Arial, sans-serif;
     font-size: 1.4rem;
     text-shadow: 0 1px 3px rgba(0,0,0,0.7);
     opacity: 0;
     transition: opacity 0.3s ease, transform 0.3s ease;
     pointer-events: none; /* 确保鼠标穿透标题，仍可触发 figure:hover */
   }
   
   /* 悬停时显示标题 */
   section.projects figure:hover div {
     opacity: 1;
     transform: translateY(0);
   }
   
   /* 可选：悬停时轻微上移增强动效 */
   section.projects figure div {
     transform: translateY(10px);
   }
   section.projects figure:hover div {
     transform: translateY(0);
   }

   ? 关键要点说明

   • pointer-events: none 是关键：它让覆盖的文字不阻挡鼠标事件，确保 <figure></figure> 仍能正常响应 :hover；
   • 使用 flex 居中比 margin: 0 auto + text-align 更健壮，尤其在响应式缩放下；
   • overflow: hidden 配合 .projects figure img 已有的 border-radius 和 transform: scale()，可防止标题在放大时溢出；
   • 所有样式均基于你现有的 .projects 结构编写，无需修改 HTML 结构，完全兼容学校模板约束。

   ? 测试建议

   将上述 CSS 添加至你的 style.css 底部（或 <style></style> 标签中），并确保每张图片的 <figure></figure> 内都包含一个 <div> 标题（如你已有的 <code>.zine、.web）。若某张图暂无标题，可先补上空 <div></div> 占位，避免布局偏移。

   ? 提示：若需不同项目显示不同动效（如从底部滑入），只需调整 transform 初始值（如 transform: translateY(100%)）和悬停值即可，无需新增类名。

   

   CSS婚礼策划服务机构宣传网站模板

   CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

   下载

   立即学习“前端免费学习笔记（深入）”；

   通过这套方案，你将获得专业、平滑、语义清晰的图片标题覆盖效果——既满足课程模板要求，又具备现代前端实践标准。