在下面给出的片段中，带有位置粘性的元素不会粘在页面的末尾。
body {
margin: 0;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}<!DOCTYPE html>
<html>
<body>
<div class="sticky">I am sticky!</div>
<div style="margin-bottom:2000px;
border:2px solid black ;">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>但是当您向 body 添加边框时，位置粘性工作正常。
body {margin:0;
border:5px solid red;}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}<!DOCTYPE html>
<html>
<body>
<div class="sticky">I am sticky!</div>
<div style="margin-bottom:2000px;
border:2px solid black ;">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>我有两个问题。
在第一个片段中，为什么具有粘性的元素没有像第二个片段一样粘在页面的末尾？
当我在 body 元素中添加边框时，为什么具有粘性位置的元素开始一直粘到第二个代码段中的页面末尾？
编辑：我做了一些实验。我的开发工具明确地向我表明，在这两种情况下，主体元素的高度并不相同。当没有边框时，正文的高度等于文本区域并且边距重叠。添加边框后，正文高度为整页。我现在不知道边境为什么要这样做。它不适用于背景颜色，仅适用于边框。
对行为的解释是正确的，我很确定。位置：粘性连接到父级（主体），在情况 1 中，您可以滚动经过主体。我只是无法解释为什么边境这样做
| 归档时间： |
|
| 查看次数： |
123 次 |
| 最近记录： |