如何让图片标签覆盖上方现有标签并向上延伸？

我想让图片向上延伸，越过它上方的HTML标签，目前的代码如下：

.toggle-modal {
  display: block;
  cursor: pointer;
  padding: 8px 30px;
  position: relative;
  margin: 0 auto;
  top: 10px;
  left: 80px;
}
#image {
  width: 200px;
  height: 180px;
}

<div className='card'>
  <FaRegStar size={20} className='toggle-modal' onClick={openModal}/>
  <Modal toggle={modalState} action={openModal} />
  <div onClick={refreshOverview}>
    {product.image ? (<img src={product.image[0].url} alt={product.name} id='image'/>) : 
    'image not available'
    }
  </div>
</div>

（注：原问题附带渲染后的顶部图片卡片效果）

解决方案思路： #

• 给父容器.card设置position: relative，作为图片绝对定位的参考基准
• 给图片#image设置position: absolute，脱离正常文档流
• 通过负的top值让图片向上偏移，比如top: -30px，数值按需调整
• 调整z-index属性，确保图片的层级高于上方的星星元素，保证覆盖效果
• 给星星元素.toggle-modal设置合适的z-index，避免点击功能被图片遮挡

修改后的CSS示例：

.card {
  position: relative;
  overflow: visible;
}
.toggle-modal {
  display: block;
  cursor: pointer;
  padding: 8px 30px;
  position: relative;
  margin: 0 auto;
  top: 10px;
  left: 80px;
  z-index: 1;
}
#image {
  width: 200px;
  height: 180px;
  position: absolute;
  top: -30px;
  z-index: 2;
}

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