当视口(viewport)宽度改变时 HTML 元素移动，但 CSS 没有改变

Question

我以前遇到过一个奇怪的问题，但我也想不通。我可以解决它，但我更愿意了解它发生的原因，以便我可以解决根本问题。

元素的位置在 1200px 和 1999px 之间变化，您可以在此处看到:1200 像素: 1999 像素: 该元素的行为就像在 1200 处有一个断点，但没有，根据 Chrome 开发工具，css 也没有改变。您可以看到 margin 和位置略有变化，但不足以引起这种位置变化。

我正在使用 Bootstrap 以防万一。

有人知道是什么原因造成的吗？

Answer 1

问题是: margin 顶部:1.5%

您有一个基于百分比的边距值，因此，在调整大小时，H2 的位置会有所不同。如果您不希望它发生变化，请将其更改为另一个单位，例如 px。

此外，您可能希望指定元素的偏移属性(左/右、上/下):

absolute

The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. Source MDN