Html 自动溢出和top属性的组合会导致奇怪的滚动

我想了解为什么会发生这种情况

当

.item

的

top

属性设置为170px时，由于

溢出：auto

的原因，滚动都会出错。但是，如果我使用

margin-top

而不是

top

，则滚动效果与我预期的一样

为什么会出现这种情况？当使用

top

而不是

margin top

时，需要采取哪些步骤来纠正滚动的奇怪现象

.container{
宽度：100vw；
最小高度：100vh；
背景色：#aa0000；
溢出：自动；
}
.项目{
宽度：200px；
最小高度：1000px；
位置：相对位置；
保证金：0自动；
背景色：#aaaa00；
顶部：170px；
/*VS*/
/*利润上限：170px*/
}
.页脚{
高度：200px；
背景色：#212121；
}

---

我认为这与相对定位与偏移的工作方式有关，如

top

对于

位置：相对
：

元素根据文档的正常流进行定位，然后根据top、right、bottom和left的值相对于自身进行偏移。偏移不影响任何其他元素的位置；因此，页面布局中为元素指定的空间与位置是静态的一样

--

因此，当使用
top
偏移元素时，它会更改元素的位置，但不会更改其父元素的高度，从而导致父元素滚动。如果改用
边距顶部
，则父元素将适应元素的新高度，而不是滚动

移除溢出：自动有助于演示。使用
top
，元素将超出其父元素的边界。使用
边距顶部
，父对象会变得更高以适应。
首先要知道的是，滚动没有问题，但这就是溢出的工作原理。overflow属性指定内容溢出元素的框“”时发生的情况。如果不希望滚动显示并隐藏其余内容，请使用overflow:hidden

现在，为什么当你使用“边距顶部”时，一切都正常，而不是使用“顶部”呢。这与溢出和滚动无关。之所以会发生这种情况，是因为您将位置属性与相对值一起使用。使用top:170px时，项目将相对于其容器定位
 你认为卷轴会如何工作？它实际上是如何工作的？@showdev使用just-top创建了一种类似于paralaxa的卷轴，使用margin-top不会单独滚动。item。我想知道为什么会发生这种行为，而不是从这两个方面得到我预期的结果