Question

我想帮助理解为什么会发生这种情况。

当.item的{{1}}属性设置为170px时，由于top，滚动全部搞砸了。但是，如果我使用overflow: auto而不是margin-top，则滚动按照我的预期运行。

为什么会发生这种情况，以及在使用top代替top时采取什么措施来纠正滚动的怪异？

margin-top

.container {
  width: 100vw;
  min-height: 100vh;
  background-color: #aa0000;
  overflow: auto;
}

.item {
  width: 200px;
  min-height: 1000px;
  position: relative;
  margin: 0 auto;
  background-color: #aaaa00;
  top: 170px;
  /*VS*/
  /*margin-top: 170px*/
}

.footer {
  height: 200px;
  background-color: #212121;
}

View on CodePen

Answer 1

我认为这与相对定位与top等偏移相关的方式有关对于position:relative：

元素根据文档的正常流程定位，然后根据顶部，右侧，底部和左侧的值相对于自身偏移。 偏移量不会影响任何其他元素的位置;因此，页面布局中元素的空间与位置是静态的相同。

- position @ MDN

因此，当您使用top偏移元素时，它会更改元素的位置，但不会更改其父级的高度，从而导致父级滚动。如果您改为使用margin-top，则父级会调整元素的新高度而不是滚动。

删除overflow:auto有助于演示。使用top，元素超出其父级的边界。使用margin-top，父母可以更高容纳。

Answer 2

首先要知道的是，滚动没有混乱，但这就是溢出的工作原理。 overflow属性指定如果内容溢出元素的框“w3schools”会发生什么。如果您不希望滚动显示并隐藏其余内容，请使用overflow：hidden。

现在，为什么当你使用“margin-top”时，一切都工作正常，而不是“顶部”。这与溢出和滚动无关。发生这种情况是因为您正在使用具有相对值的position属性。当您使用top：170px时，该项目将相对于其容器定位。

自动溢出和顶级属性的组合导致奇怪的滚动

2 个答案: