是什么导致填充改变绝对定位div的布局？

Question

在本网站上：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以下的填充会产生这种违反直觉的效果呢？

Answer 1

没有.headerContainer上的填充，子元素（.logo具体而言）collapses上带有.headerContainer的边距，将整个容器按下边距撞击是20px。