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

问题描述：

当.item的top属性设置为170px时，由于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; 
 
}

<div class="container"> 
 
    <div class="item"> 
 
    </div> 
 
</div> 
 
<div class="footer"> 
 
</div>

View on CodePen

您如何期望滚动工作以及它如何工作？ – showdev

@showdev使用顶部创建一种paralaxa滚动，使用margin-top不会独立滚动.item。我想知道为什么会出现这种情况，而不是得到我的预期结果 –

答

我认为这与相对定位可与像top偏移的方式做。
对于position:relative：

该元件是根据文档的正常流动定位，然后根据上面的值偏移相对于本身，右，下和左。 偏移量不会影响任何其他元素的位置;因此，页面布局中为元素提供的空间与位置是静态的空间相同。

- position @ MDN

所以，当你与top位置的元素，它改变了元素的位置，但不会改变其母公司的高度，引起家长滚动。如果您改用margin-top，则父级可容纳元素的新高度，而不是滚动。

删除overflow:auto有助于演示。使用top，该元素超出了其父项的范围。使用margin-top，父母可以适应更高。

好的，这很有道理。 –

答

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

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

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

相关推荐