Dimension/Size 图像在 HTML/CSS "breaking" 中基于其位置

Question

我在 HTML/CSS 中编码，当我将图像位置设置为 absolute 时，一切正常。但问题是，一旦我将它设置为 relative，它的边框就会变得很奇怪。以下是一些示例：

绝对 - CSS:

.dashboard-button {
  position: absolute;
  border: thin red solid;
}

绝对 - 图片： https://gyazo.com/43135c7c665aceb4cdb232f50887d446

亲戚 - CSS:

.dashboard-button {
  position: relative;
  border: thin red solid;
}

相对 - 图片： https://gyazo.com/661182fb53acfb6b732a70b3b00ca38a

如您所见，使用 relative，图像的边框自行变平。我试过将 height 设置为图像的高度。我试过将 height 设置为 100%，我什至尝试过一些疯狂的事情。我将 height 设置为 500px，只是为了看看它是否会执行任何操作。它没有。我不确定这里出了什么问题，但非常感谢任何答案！谢谢。

Answer 1

找到解决方案...我所要做的就是将 display 设置为 inline-block。这是我的新 CSS 代码：

.dashboard-button {
  position: relative;
  display: inline-block;
  border: thin red solid;
}

Dimension/Size 图像在 HTML/CSS "breaking" 中基于其位置

Dimension/Size of image in HTML/CSS "breaking" based on its position

html

css

position

css-position

absolute