如何实现按钮在图片右下角的精准重叠布局

嘿，我看了你的代码，问题其实出在容器的定位设置上！你现在的按钮之所以乱跑，是因为绝对定位的元素需要一个已定位的父容器作为参考基准，而你的.HomepageBannerContainer没设置position: relative，导致按钮只能往上找其他定位元素（甚至是body）来定位，自然就不在图片右下角啦。

下面是修正后的完整方案，一步步帮你搞定：

核心修改点 #

• 给图片容器添加position: relative，让按钮的绝对定位以容器为基准
• 优化图片样式，保持比例避免拉伸
• 完善按钮的hover效果

修正后的CSS代码 #

/* 容器必须设置position: relative，作为绝对定位元素的参考 */
.HomepageBannerContainer {
  position: relative;
  max-width: 100%; /* 可选，做响应式适配 */
}

.HomepageBannerImage1 {
  width: 100%;
  height: auto; /* 保持图片原始比例，避免变形 */
  display: block; /* 移除图片默认的行内间距 */
}

.buttonOnImage {
  position: absolute;
  bottom: 0px;
  right: 15px;
  border-color: goldenrod;
  border-style: solid;
  background-color: transparent;
  padding: 15px 32px;
  text-align: center;
  color: goldenrod;
  font-size: 16px;
  cursor: pointer;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
}

.buttonOnImage:hover {
  background-color: goldenrod; /* 补上hover时的背景色 */
  color: white;
}

保留你的HTML结构即可 #

<div class="HomepageBannerContainer">
  <img src="https://mvdataappstorageuscaprod.blob.core.windows.net/medialibrary-77aaba81e0484f88ba36c3c3b1e9c663-r/885635f1713f4b9ea1ceb61b3aba783f/885635f1713f4b9ea1ceb61b3aba783f/Large/4000D_RGB_AF_WHITE_RENDER_24.png?sv=2017-04-17&sr=b&si=201911192214&sig=5TpJjopZRU%2FP5fwW4FBdL1jW12h8hx2PgtfyINKMkmM%3D&st=1404-09-08T23%3A38%3A03Z&se=2033-03-20T00%3A26%3A35Z" alt="" class="HomepageBannerImage1">
  <button class="buttonOnImage" type="button">Corsair Configuration</button>
</div>

原理说明 #

1. 定位参考系：当子元素设置position: absolute时，它会寻找最近的、设置了position: relative/absolute/fixed的父元素作为定位基准。如果找不到，就会相对于整个文档（body）定位，这就是你之前按钮位置混乱的原因。
2. 图片比例保持：用height: auto代替height: 100%，可以让图片根据宽度自动调整高度，避免拉伸变形，适配不同屏幕尺寸。
3. 按钮定位：bottom: 0和right: 15px会让按钮紧贴容器的底部和右侧（留出15px的右边距），完美贴合图片右下角。

备注：内容来源于stack exchange，提问作者loid