Html 删除容器内创建的空间

我有一个容器，它有一个图像，在图像的顶部有一个按钮，但是在容器的内部，一些“额外”的空间被创建了，在右边。我需要删除这个额外的空间，因为它占用了太多的空间。3个水平图像在中心对齐，同时使用flex显示。使用引导

没有宽度或高度大小，只有此按钮后面的图像

你有兴趣吗？
卡雷拉斯

。容器img感兴趣{
边框：1px纯黑；
显示：内联flex；
对齐项目：居中；
文本对齐：居中；
}
.集装箱img利息>img{
位置：绝对位置；
z指数：-1；
}
.btn{
右：80px；
顶部：40px；
位置：相对位置；
z指数：1；
}

---

我必须重复这一点，并将其转化为一个过程，以便按钮始终位于这些矩形的顶部。

不确定这是否适用于您，因为不清楚您想用该按钮做什么。您可以给父div一个相对的位置，并使按钮与div绝对定位，然后相应地调整HTML和CSS，请参见代码段：

。容器img感兴趣{
显示：内联flex；
对齐项目：居中；
文本对齐：居中；
位置：相对位置；
}
.集装箱img利息>img{
位置：绝对位置；
z指数：-1；
}
.btn{
位置：绝对位置；
左：50%；
底部：0px；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
}

你有兴趣吗？
卡雷拉斯

不确定这是否适合您，因为不清楚您想用该按钮做什么。您可以给父div一个相对的位置，并使按钮与div绝对定位，然后相应地调整HTML和CSS，请参见代码段：

。容器img感兴趣{
显示：内联flex；
对齐项目：居中；
文本对齐：居中；
位置：相对位置；
}
.集装箱img利息>img{
位置：绝对位置；
z指数：-1；
}
.btn{
位置：绝对位置；
左：50%；
底部：0px；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
}

你有兴趣吗？
卡雷拉斯

实际上，如果需要向上显示按钮，则使用相对于按钮的位置的图像。因此，按钮将以其宽度为准

相对位置：如果设置为相对位置，则元素在其应处于的相同确切位置处占用的空间量与其静态位置相同。但是，它可能会在视觉上被推到不同的位置这就是为什么sapce会在图像中四处走动。

绝对位置：绝对位置将文档从文档流中取出。这意味着它不再像static和relative那样占用任何空间

---

因此，如果需要在使用相对于按钮的位置的图像上显示按钮，则需要在按钮上添加位置绝对位置，以及相对于其容器img感兴趣的位置。因此，按钮将以其宽度为准

相对位置：如果设置为相对位置，则元素在其应处于的相同确切位置处占用的空间量与其静态位置相同。但是，它可能会在视觉上被推到不同的位置这就是为什么sapce会在图像中四处走动。

绝对位置：绝对位置将文档从文档流中取出。这意味着它不再像static和relative那样占用任何空间

---

因此，您需要在按钮上添加位置绝对位置和相对于其容器img兴趣的位置

是否有更多示例HTML？是的！当然，我刚刚更新了这个问题。你有更多的HTML示例吗？是的！当然，我刚刚更新了问题。这对我很有效，非常感谢！只需要将按钮正确地放置在图片底部。这对我来说很有效，非常感谢！只需将按钮正确放置在图像底部。是的，这也是正确的，我需要将div元素的位置设置为相对，将按钮设置为绝对感谢。是的，这也是正确的，我需要将div元素的位置设置为相对，将按钮设置为绝对感谢。