如何让图标和文本响应式地定位在图片上方？

你提到的绝对定位在图片尺寸变化时图标移出的问题，核心是没给父容器设置相对定位参考，且定位属性未用响应式单位。以下是修复方案：

修复后的CSS代码 #

.container {
  display: grid;
  height: 70vh;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 0 16px;
  margin-top: 15px;
}

.item {
  cursor: pointer;
  padding: 1px;
  /* 关键：设置相对定位，作为内部绝对定位元素的参考容器 */
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.item img {
  height: 20vw;
  width: 100%;
  z-index: 1;
  filter: brightness(60%);
  object-fit: cover;
  /* 消除行内元素默认间隙，确保容器尺寸准确 */
  display: block;
}

.item-icon {
  /* 基于父容器.item绝对定位 */
  position: absolute;
  top: 50%;
  left: 50%;
  /* 利用transform实现精准居中 */
  transform: translate(-50%, -50%);
  /* 用vw单位实现响应式缩放，适配不同视窗 */
  font-size: 8vw;
  color: white;
  /* 确保图标显示在图片上方 */
  z-index: 2;
}

.item h2 {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  z-index: 2;
  margin: 0;
}

修复后的HTML代码 #

<div className='container'>
  <div className='item'>
    <img src={image1} alt="" />
    <MenuBookIcon className='item-icon' />
    <h2>Item1</h2>
  </div>
  <div className='item'>
    <img src={image2} alt="" />
    <LocalCafeIcon className='item-icon' />
    <h2>Item2</h2>
  </div>
  <div className='item'>
    <img src={image3} alt="" />
    <EmojiObjectsIcon className='item-icon' />
    <h2>item3</h2>
  </div>
</div>

核心修复说明 #

• 给.item添加position: relative：让内部绝对定位元素以父容器为参考，而非整个页面
• 将重复的id="item"改为class="item-icon"：避免DOM元素ID冲突，同时统一图标样式
• 用百分比定位+transform: translate实现居中：确保图片尺寸变化时，图标始终保持在图片中央
• 图标字体用vw单位：随视窗宽度自适应缩放，防止溢出图片边界
• 修正原CSS中z-index: 1-的语法错误，改为z-index: 1

内容的提问来源于stack exchange，提问作者Routfin