Html 添加按钮后，包装大小增加

我有一个图像包装，我想在其中显示一个黑色背景的鼠标悬停按钮。我试图这样做，但它增加了一个空白的容器底部，我不知道为什么

HTML:

注意忽略Javascript，我知道Javascript将用于在鼠标输入时显示按钮，但我只想修复图像下方的额外空间，并将按钮置于图像的右下角

.view-deal-button {
  border: none;
  border-radius: 6px;
  text-align: center;
  float: right;
  margin: 5px 0;
  background-color: #CD277B;
  padding:6px;
}

---

发生这种情况是因为相对位置和底部属性

 .view-deal-button {
    background-color: #CD277B;
    border: medium none;
    border-radius: 6px;
    bottom: 36px;
    left: 343px;
    padding: 6px;
    position: relative;
    text-align: center;
    z-index: 999;
}

将按钮向右移动到图像下方

.view-deal-button {
  border: none;
  border-radius: 6px;
  text-align: center;
  float: right;
  margin: 5px 0;
  background-color: #CD277B;
  padding:6px;
}

---

您的按钮具有“相对”位置，这是创建底部空间的原因。它的“质量”正在影响其父容器。如果您不希望它有任何“质量”，请尝试将其相对于父对象定位为“绝对”。

尝试此css for按钮

.view-deal-button 
{
    border: none;
    text-align: center;
    border-radius: 6px;
    text-align: center;
    z-index: 999;
    position: relative;
    left: 343px;
    bottom: 36px;
    background-color: #CD277B;
    padding:6px;
    margin: 0% 0% 0% -80%;
}

---

请勾选此项。首先，尝试将图像设置为

display:block尽管如此。查看交易按钮是您谈论的按钮吗？@Paulie_D已经添加了它。是@AJ交易按钮。我希望它位于右下角查看按钮应该显示在哪里？接下来呢？在图像下的容器内？那么我如何将按钮移动到图像的右下角？@user3339224这有帮助吗？没问题。很高兴能帮忙。
.view-deal-button 
{
    border: none;
    text-align: center;
    border-radius: 6px;
    text-align: center;
    z-index: 999;
    position: relative;
    left: 343px;
    bottom: 36px;
    background-color: #CD277B;
    padding:6px;
    margin: 0% 0% 0% -80%;
}