视口宽度更改时移动的HTML元素，但CSS中没有更改

Question

我之前遇到过一个奇怪的问题，但我也无法弄清楚这个问题。我可以解决它，但我更愿意理解它为什么会发生，以便我能解决根本问题。

元素的位置在1200px和1999px之间变化，如下所示： 1200像素： 1999px： 该元素的行为就像在1200处有一个断点，但没有，并且css也不会根据Chrome开发工具进行更改。 您可以看到保证金和头寸略有变化但不足以导致这种情况发生变化。

我正在使用Bootstrap以防万一。

有没有人知道造成这种情况的原因是什么？

Answer 1

这是问题所在： margin-top: 1.5%

您有一个基于百分比的保证金值，因此，在调整大小时，H2的定位会有所不同。 如果您不希望它变化，请将其更改为其他单位，例如px。

此外，您可能希望指定元素的偏移属性（左/右，上/下）：

  

absolute

     

元素从正常文档流中删除;没有创建空间   对于页面布局中的元素。相反，它是相对的   到最近的祖先（如果有的话）;否则，它被放置   相对于初始包含块。它的最终位置是   由top，right，bottom和left的值确定。这个值   当z-index的值不是auto时，会创建新的堆叠上下文。   绝对定位的盒子可以有边距，并且它们不会崩溃   与任何其他利润。 Source MDN