双向“粘性”位置（“固定”时的工作方式）

Question

• 在第一张图片上，当滚动到达父元素时，粘性元素会粘在屏幕底部（如预期的那样）
• 在第二张图片上，当滚动将粘性元素居中时，它不会粘在任何地方
• 在第三张图片上，当滚动进一步时，粘性元素会粘在屏幕顶部（如预期的那样）

这是我的问题：

• 据我所知，当粘性元素到达其在视口上的位置时，粘性位置会切换到“位置：固定”
• 第二张图肯定不是这样，因为粘性元素既不粘在屏幕的顶部也不粘在屏幕的底部
• 为什么粘性元素在第二张图片上所做的正是如此？

.parentSticky {
    width: 50%;
    height: 800px;
    border: solid black 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}
.siblingSticky {
    width: 100%;
    height: 100px;
    background-color: orange;
    border: solid 10px red;
    display: inline-block;
    flex: 50 0 1px;
    box-sizing: border-box;
}
.Istick {
    flex-grow: 1;
    border: solid 10px green;
    box-sizing: border-box;
    position: sticky;
    bottom: 10px;
    top: 10px;
}

<!-- break tags illustrate the page's other contents (scrolling demo) -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



<div class="parentSticky">
    <div class="siblingSticky"> Element  </div>
    <div class="siblingSticky Istick" > "Sticky" element </div>
    <div class="siblingSticky"> Element </div>
</div>




<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 1

您忘记了关于粘性的重要部分：

粘性定位元素是其计算位置值为粘性的元素。它被视为相对定位，直到其包含块超过指定阈值 ^ref

所以在第二张图片中，粘性元素表现为相对元素。

使用简单的话，粘性元素只有在由于滚动而从屏幕上隐藏时才会表现为粘性，在这种情况下粘性行为将强制保持可见。如果它已经可见（就像在第二张图片中一样），则不需要任何粘性行为，并且元素的行为就像设置了 position:relative 一样。

top/bottom 仅用于定义偏移量。

---

更多细节的相关问题：

Why position:sticky is not working when the element is wrapped inside another one?

Why element with position:sticky doesn't stick to the bottom of parent?

What are `scrolling boxes`?