带位置的子项:固定滚动，位置:固定，溢出:自动父级

Question

我有一个有position:fixed; width/height:100%; overflow:auto的父母和一个也有position:fixed的孩子。当父级的内容溢出并且父级开始滚动时，我希望子级相对于视口保持固定。它没有。

该方案是使用 CSS 转换在内容顶部的向下滑动面板。下滑面板有一个关闭按钮，当面板的内容滚动时，该按钮应保持在视图中。将 .overlay 元素上的 .overlay-slidedown 类更改为 .overlay-fade，在这种情况下，关闭按钮将保留在其位置。

https://jsfiddle.net/xajk7uez/3/

Answer 1

如果您在.overlay中添加一个额外的层作为同级，.overlay-close仅解决overflow-y: scroll;，则.overlay-close上的position: fixed;将起作用。此.overlay-content层也应为 100% 宽/高

.overlay > .overlay-content {
    width: 100%;
  height: 100%;
  overflow: auto;
}

有关演示，请参阅更新的 Fidle。

https://jsfiddle.net/n0wxfc60/2/

Answer 2

您的问题的解决方案将是

将.overlay-close放在.overlay外

在此处查看我的编辑 https://jsfiddle.net/xajk7uez/5/

我相信这个问题解决了你的问题。