双向 "sticky" 位置（"fixed" 时它是如何工作的）

Question

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

这是我的问题：

据我所知，当粘性元素到达其在视口上的位置时，粘性位置切换到 "position:fixed"
在第二张图片上绝对不是这种情况，因为粘性元素既不会粘在屏幕的顶部也不会粘在屏幕的底部
为什么第二张图片上的粘性元素就是这么做的？

.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

你忘记了粘性的一个重要部分，那就是：

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold ^ref

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

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

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

双向 "sticky" 位置（"fixed" 时它是如何工作的）

bidirectional "sticky" position (how it is working when "fixed")

css

css-position

sticky