如何将下载按钮精准定位到图片右侧正下方？

我正在开发一个包含页眉和主体图片的网站，尝试将下载按钮定位到图片右侧正下方时遇到了问题。我尝试了三种解决方案，但均未达到预期效果：

方案一 #

CSS代码 #

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper {
  position: relative;
}

#downloadButton {
  position: absolute;
  bottom: 10px;
  background-color: #9C78E4;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#downloadButton:hover {
  background-color: #584089;
}

HTML代码 #

<div class="img-container">
  <div class="image-wrapper">
    <img id="plattegrond" src="images/plattegrond.jpg" class="center" />
    <button id="downloadButton">Download</button>
  </div>
</div>

结果：预期按钮出现在图片右侧正下方，但实际居中显示在图片下方。

方案二 #

CSS代码 #

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.image-wrapper {
  position: relative;
  text-align: center;
}

#plattegrond {
  width: 50%;
}

#downloadButton {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #9C78E4;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#downloadButton:hover {
  background-color: #584089;
}

HTML代码 #

<div class="img-container">
  <div class="image-wrapper">
    <img id="plattegrond" src="images/plattegrond.jpg" class="center" />
    <button id="downloadButton">Download</button>
  </div>
</div>

结果：调整图片宽度并为按钮添加右定位后，图片过大，占网页约95%。

方案三 #

CSS代码 #

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.image-wrapper {
  text-align: center;
  position: relative;
}

#plattegrond {
  max-width: 100%;
  height: auto;
}

#downloadButton {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #9C78E4;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#downloadButton:hover {
  background-color: #584089;
}

结果：缩小了图片，但尺寸比预期偏小。

期间尝试过多种策略仍未解决，恳请提供可行的解决方案。

解决方案 #

要实现按钮在图片右侧正下方，同时保证图片尺寸符合预期，可按以下方式调整：

核心思路 #

1. 让图片容器仅包裹图片，避免额外样式影响容器尺寸；
2. 给图片设置合理的最大宽度与自适应规则，平衡显示大小；
3. 通过绝对定位精准控制按钮在图片右下角的位置。

调整后的代码 #

CSS代码

/* 容器居中图片，避开页眉遮挡 */
.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px); /* 替换80px为实际页眉高度 */
  padding: 20px;
}

/* 图片容器，尺寸与图片匹配 */
.image-wrapper {
  position: relative;
  max-width: 800px; /* 按需调整图片最大显示宽度 */
  width: 100%;
}

/* 图片自适应容器，消除默认间距 */
#plattegrond {
  width: 100%;
  height: auto;
  display: block;
}

/* 按钮定位到图片右下角 */
#downloadButton {
  position: absolute;
  bottom: -40px; /* 控制按钮与图片底部的垂直距离 */
  right: 0;
  background-color: #9C78E4;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#downloadButton:hover {
  background-color: #584089;
}

HTML代码

<div class="img-container">
  <div class="image-wrapper">
    <img id="plattegrond" src="images/plattegrond.jpg" />
    <button id="downloadButton">Download</button>
  </div>
</div>

说明 #

• min-height: calc(100vh - 80px)：根据实际页眉高度修改数值，确保图片容器不被页眉遮挡；
• max-width: 800px：可根据需求调整，既避免图片过大撑满页面，也不会过小影响展示；
• bottom: -40px：调整此值可控制按钮与图片底部的距离，保证按钮在图片正下方区域；
• right: 0：让按钮对齐图片右侧边缘，实现“右侧正下方”的定位效果。

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