位置粘性没有正确粘贴[重复]答案

【问题标题】：position sticky is not sticking properly [duplicate]位置粘性没有正确粘贴[重复]
【发布时间】：2021-01-03 00:54:23
【问题描述】：

在下面给出的sn-p中，位置为sticky的元素不会粘在页面的末尾。

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 添加一个边框时，位置sticky 可以正常工作。

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>

我有 2 个问题。

在第一个sn-p中，为什么位置为sticky的元素没有像在第二个 sn-p 中？
为什么位置为sticky的元素在第二秒就开始一直粘到页面末尾 sn-p 当我在 body 元素中添加边框时？

【问题讨论】：

你可以在粘性类中使用position:fixed，而不是position:sticky
@RayeesAC 我确定他使用粘性是有原因的，固定会产生完全不同的结果。
position: sticky 表示它从position: relative 和position: fixed 更改。这可能是一个原因。
我认为这里的margin-bottom 使问题使用padding 而不是正常工作。
好的，我会努力的

标签： html css

【解决方案1】：

This documentation really explains why this issue happens

这些是我理解的要点

粘性位置与相对位置相同，只是它的偏移量会根据最近的祖先滚动容器的滚动端口自动调整，无论在哪个轴上，插入属性都不是自动的，以尽量保持框在视图内当用户滚动时，它的包含块。这种定位方案称为粘性定位。

在你的情况下，祖先元素就是body

body元素的高度和宽度默认设置为auto

添加段落后，'body 的高度会调整为它的高度（比如 110vh）

这会让你的粘性元素坚持到 110vh 即使您将 200vh 的 margin-bottom 添加到 div ，这也永远不会改变 body 的高度，它仍然保持 110vh（为什么正确？在下面回答）。

如果没有边框、内边距、内联部分、创建的块格式化上下文，或者没有将块的 margin-top 与其一个或多个后代块的 margin-top 分开的间隙；或者没有边框、填充、内联内容、高度、最小高度或最大高度来将块的边距底部与其一个或多个后代块的边距底部分开，然后这些边距折叠。 折叠的边距在父级之外结束。

在您的情况下，由于父 body 没有边框，手动高度，...这导致您的 2000px 分割边距超出身体

结论：

粘性位置与其父元素的高度非常相关。
分析父子元素之间是否存在边距冲突。 3.为了避免边距冲突，我们可以在父元素上使用边框、内联部分、块格式等。

我已经注释了一些 CSS 属性，您可以在父级上添加以避免边距冲突。

body {
/*border :1px solid transparent;*/
/*display:inline-block;*/
/*padding :1px;*/
float:left;
}

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 ; background:#aaa;">
    <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>

【讨论】：

【解决方案2】：

编辑：我做了一些实验。我的开发工具明确地告诉我，在这两种情况下，body-element 的高度是不一样的。当您没有边框时，正文的高度等于文本区域并且边距重叠。添加边框后，body-height 为整页。我现在不知道为什么边界会这样做。它不适用于背景颜色，仅适用于边框。

对行为的解释是正确的，我很确定。 position:sticky 连接到父级（body），在第 1 种情况下，您可以滚动越过 body。我只是无法解释为什么边框会这样做

【讨论】：

有无边框，页面大小一样，这不是正确答案。
@IslamElshobokshy 我重新检查了 20 次，没有边框的身体有 250 像素的高度（在我的屏幕上），有边框的 2250 像素。那太有趣了，我不知道为什么会这样
@Warden330 。确实。我还检查并确认添加边框时，主体元素的高度会增加。既然你有好名声，为什么不问这个问题。

【解决方案3】：

可滚动元素必须是内联类型，例如inline、inline-block、inline-flex 或 inline-grid：

这是您发现的非常有趣的行为 - 不知何故，添加边框会完全改变元素的高度，使其成为全高，而不是仅仅适合内容。那部分我不能只解释使用内联元素使其全高的正常解决方案?

body {
  margin: 0;
  display: inline-block;
}

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>

【讨论】：

那么边框为包含的元素添加了内联显示？这，虽然，是最接近正确答案的，所以你得到我的+1。但请务必解释边框对元素的实际行为。
@IslamElshobokshy 最初的问题是由于边距折叠使 div 的边距超出身体。添加边框或使正文内联块只会禁用此边距折叠
@TemaniAfif 您的评论实际上是最好的单线答案，感谢您的解释！