CSS将固定子级固定在具有溢出-y自动的转换父级中，滚动父级时子级移动答案

【问题标题】：CSS Position fixed child in a transformed parent with overflow-y auto, child moves when scrolling parentCSS将固定子级固定在具有溢出-y自动的转换父级中，滚动父级时子级移动
【发布时间】：2018-11-08 00:10:55
【问题描述】：

我正在尝试使用伪 after 元素在 div 的末尾创建一个渐变，以表明它是可滚动的。在 div 上使用transform: translateZ(0); 可以让伪元素使用position: fixed; 粘在元素底部。然而，一旦你开始滚动，伪元素就会随着 div 的内容向上滚动。滚动时是否可以让这个元素粘在这个div的底部（除了使用position: sticky;，出于浏览器支持的原因我避免使用它）？

这是我现在所拥有的一个小提琴： https://jsfiddle.net/ebL485q9/2/

谢谢！

【问题讨论】：

标签： css scroll position transform fixed

【解决方案1】：

实现此目的的一种方法是将可滚动内容包装在另一个容器div 中，并将渐变的位置从固定更改为绝对。将您的最大高度更改应用于外部容器。这样，您的外部容器控制打开和关闭，内部容器始终保持固定高度。

这里更新了小提琴：

https://jsfiddle.net/pv72xbog/

希望这会有所帮助。干杯。

【讨论】：

非常感谢你！这就像一个魅力。它还帮助我意识到我最初的部分问题是伪元素的父元素在需要恢复为静态时应用了相对位置。非常感谢！
@Lisa 很棒。我很高兴这一切都解决了！如果我的答案对您有用，请投票并标记为选定答案。干杯。