Css 为什么“溢出：隐藏”阻止“位置：粘滞”工作？

在下面的代码片段中，容器中有一个粘性的

div

。它会粘在滚动面板的顶部，同时始终保持在其容器内。这与iOS上的

UITableView

头的行为相同，其中头一直可见，直到下一个头位于顶部

在第二个代码段中，除了容器有一个

溢出：隐藏的
CSS规则外，所有内容都是相同的。这似乎会阻止
位置：sticky
行为正常工作


.parent{
位置：相对位置；
背景：#ccc；
宽度：500px；
高度：150像素；
溢出：自动；
边缘底部：20px；
}
.隐藏溢出{
溢出：隐藏；
}
.粘的{
位置：粘性；
背景：#333；
文本对齐：居中；
颜色：#fff；
顶部：10px；
}

你好，我是一个粘在容器里面的人，里面有第一段。

Lorem ipsum dolor sit amet，是一位杰出的献身者。Vivamus是一个很好的例子。整株啤酒发酵液。Donec cursus magna eu congue posuere。塞德·埃吉特·利古拉·夸姆。塞德·拉奥里特·埃尼姆·萨皮恩，埃吉特·帕特·尼塞尔·佩伦斯克尔·维尔。没有一个id或一个sed dolor sodales tristique。福吉亚牧师在教堂和奥奇教堂做礼拜。在我们的饮食中，尼布·奎斯·亚库利斯·维韦拉（nibh quis iaculis viverra）。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。前庭，无蜗壳，无蜗壳，无蜗壳，无蜗壳。他吃了一只乌龟。无主之地，前庭之地，无主之地。矢状舌骨，
圣公会，圣母院，奥古斯都圣母院。


Lorem ipsum dolor sit amet，是一位杰出的献身者。Vivamus是一个很好的例子。整株啤酒发酵液。Donec cursus magna eu congue posuere。塞德·埃吉特·利古拉·夸姆。Sed laoreet enim sapien，eget Pat
nisl Pellentsque vel。没有一个id或一个sed dolor sodales tristique。福吉亚牧师在教堂和奥奇教堂做礼拜。在我们的饮食中，尼布·奎斯·亚库利斯·维韦拉（nibh quis iaculis viverra）。根据conubia nostra和inceptos，分类适用于taciti Socisqu和litora扭矩
himenaeos。前庭，无蜗壳，无蜗壳，无蜗壳，无蜗壳。他吃了一只乌龟。无主之地，前庭之地，无主之地。矢状舌骨，
圣公会，圣母院，奥古斯都圣母院。


整句话预示着一个新的开始，意味着一个新的开始。在封建时代，利奥的生活便利，埃吉特·拉奥里特·奥古斯特的名言。Nunc设施是暂时的封建制度。中间直径。非利索斯·艾库利斯的艺术大师，同一性的权杖，设施的艺术大师。
整体水平，前庭水平，前庭水平，前庭水平。生命之相是一种美丽的生命。

您好，我是容器中的另一个粘滞者，其中包含第一段，但我的容器已溢出：隐藏。

Lorem ipsum dolor sit amet，是一位杰出的献身者。Vivamus是一个很好的例子。整株啤酒发酵液。Donec cursus magna eu congue posuere。塞德·埃吉特·利古拉·夸姆。塞德·拉奥里特·埃尼姆·萨皮恩，埃吉特·帕特·尼塞尔·佩伦斯克尔·维尔。没有一个id或一个sed dolor sodales tristique。福吉亚牧师在教堂和奥奇教堂做礼拜。在我们的饮食中，尼布·奎斯·亚库利斯·维韦拉（nibh quis iaculis viverra）。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。前庭，无蜗壳，无蜗壳，无蜗壳，无蜗壳。他吃了一只乌龟。无主之地，前庭之地，无主之地。矢状舌骨，
圣公会，圣母院，奥古斯都圣母院。


Lorem ipsum dolor sit amet，是一位杰出的献身者。Vivamus是一个很好的例子。整株啤酒发酵液。Donec cursus magna eu congue posuere。塞德·埃吉特·利古拉·夸姆。Sed laoreet enim sapien，eget Pat
nisl Pellentsque vel。没有一个id或一个sed dolor sodales tristique。福吉亚牧师在教堂和奥奇教堂做礼拜。在我们的饮食中，尼布·奎斯·亚库利斯·维韦拉（nibh quis iaculis viverra）。根据conubia nostra和inceptos，分类适用于taciti Socisqu和litora扭矩
himenaeos。前庭，无蜗壳，无蜗壳，无蜗壳，无蜗壳。他吃了一只乌龟。无主之地，前庭之地，无主之地。矢状舌骨，
圣公会，圣母院，奥古斯都圣母院。


整句话预示着一个新的开始，意味着一个新的开始。在封建时代，利奥的生活便利，埃吉特·拉奥里特·奥古斯特的名言。Nunc设施是暂时的封建制度。中间直径。非利索斯·艾库利斯的艺术大师，同一性的权杖，设施的艺术大师。
整体水平，前庭水平，前庭水平，前庭水平。生命之相是一种美丽的生命。

根据Mozilla（）

Sticky是一种实验性API，不应在生产代码中使用

所以对我来说，这就是它不起作用的原因。Edge和IE 11也不支持它，所以对我来说，用javascript做这样的事情是前进的方向，有很多东西应该会有所帮助

例如：

希望这有帮助。
根据Mozilla（）

Sticky是一种实验性API，不应在生产代码中使用

所以对我来说，这就是它不起作用的原因。Edge和IE 11也不支持它，所以对我来说，用javascript做这样的事情是前进的方向，有很多东西应该会有所帮助

一个例子
.parent {
    /*overflow: hidden; removed */
    position: absolute; /*this is required for clip-paths to work*/
    -webkit-clip-path: inset(0); /* safari*/
    clip-path: inset(0);
    clip: rect(0px, auto, auto, 0px); /* IE11/Edge (not that IE11 supports sticky anyway!) */
}

@include media('<tablet') { // When tablet viewport or smaller
    main {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
...