Css 是否有可能超越'；溢出：隐藏'；父母有'；位置：粘性'；？

我有一个两列布局，其中我希望右列为

位置：sticky

，这样它在滚动较长的左列时保持在视图中

这是两个引导列，所以我要做的第一件事就是删除浮动（而是使用

display:inline block

）

它本身工作正常，或者在这个特定页面的DOM顶部附近工作正常，但是在渲染位置（唉，大约有30个div深……不问……），我无法让它工作。这两列只是继续滚动

我知道父元素是否有一个

溢出

属性而不是

可见

，该属性可能会破坏

位置：粘性

，但这似乎不是问题所在。如果链上的任何父元素设置了溢出，它是否可以打破粘性定位

我只是确定在这种情况下要寻找什么，以确定在这种情况下是什么破坏了它。当涉及到粘性定位时，是否还有其他需要注意的关键事项

编辑：我重新编写了我的问题，因为（在进一步调查和测试之后）问题确实是DOM顶部附近的父元素被设置为

overflow-x:hidden

。由于这是共享代码，我必须找出原因和原因

但是…在此期间，是否有任何已知的解决方法…可以使用DOM树下的元素作为项目的包含元素

在下面的示例中，如果您从

中删除溢出。问题

页面的行为与我所希望的一样（当您滚动页面时，右栏“粘住”）

。问题{
溢出x：隐藏；
}
.栏目{
显示：内联块；
宽度：45%；
垂直对齐：顶部；
}
.专栏1{
边框：1px纯红；
高度：1000px；
}
.专栏2{
边框：1px纯绿色；
位置：粘性；
顶部：1px；
}

这是第1列（高的那一列）
这是第2列（粘性的一列）

正如您已经注意到的，粘性位置和滚动条之间的任何溢出属性都会将其破坏（此处解释：和此处）

在您的情况下，一种解决方法是将滚动移动到另一个元素并隐藏默认元素：

。问题{
溢出x：隐藏；
}
/*加上这个*/
.包装纸{
高度：100vh；
溢出：自动；
}
身体{
溢出：隐藏；
保证金：0；
}
/**/
.栏目{
显示：内联块；
宽度：45%；
垂直对齐：顶部；
}
.专栏1{
边框：1px纯红；
高度：1000px；
}
.专栏2{
边框：1px纯绿色；
位置：粘性；
顶部：1px；
}

这是第1列（高的那一列）
这是第2列（粘性的一列）

是的，我相信除了“可见”之外的

溢出值定义了滚动容器。粘滞元素粘附到最近的滚动容器祖先。作为参考，请参阅：“…如果您将overflow设置为hidden on the any祖先的粘性元素，那么这个祖先元素将是粘性元素的滚动容器”。@showdev yea，这就是我发现的。本质上，溢出：隐藏在DOM中粘性元素上方的任何地方都会“破坏”它。（我意识到它在技术上是按照规范工作的，但本质上破坏了此功能的实用性）我发现它也限制了某些布局。您可能会考虑发布特定的实现，看看是否有人能找到解决方案。添加了示例代码。谢谢一种解决方案可能是使用。尽管它说它“在溢出的块中不起作用”，并且“滚动祖先会导致粘滞，滚动窗口不会”，但它似乎起作用。确保使用
forceSticky（）
“强制启用polyfill，即使浏览器支持
position:sticky
本机”。也看到了。嗯……有趣！似乎在包装上强制设置一个高度，以使滚动项成为键。让我玩一下这个。谢谢我认为这是我们用CSS能做的最好的了。唉，这在某种程度上仍然是有限的，因为你必须强迫一个在很多情况下（包括我们的情况）都不起作用的高度。但我认为，在某些情况下，这是一个很好的解决方案@爸爸。我想也没有别的办法了。规范可能会改变，因为这个特性仍然是新的，我们将有更多的灵活性（希望如此…）