在这个网站上： www.giftlab.com
顶部的"免费送货"圆圈（div id：floating-header-button）有position: absolute; top: 10px。它的父div（headerContainer）有样式position: relative; padding: 1px;
如果父div （ headerContainer ） 的填充从 1px 更改为 0px，则子div （ floating-header-button ） 会将页面向下下拉约 20px。这是什么原因造成的？对填充的 1px 更改如何产生对位置的 20px 更改？
如果我增加填充，圆圈会留在原地，其他一切都会移动（正如我所期望的那样），那么为什么将填充减少到 1px 以下会产生如此违反直觉的效果呢？
如果没有.headerContainer上的填充，子元素（特别是.logo）上的边距会随着.headerContainer而折叠，使整个容器的边距下降，这是20px。