Child 与 position:fixed 滚动与 position:fixed、overflow:auto parent

Question

我有一个 parent 和 position:fixed; width/height:100%; overflow:auto 以及一个 child 也有 position:fixed。当 parent 的内容溢出并且 parent 开始滚动时，我希望 child 相对于视口保持固定。它不是。

场景是使用 css 转换在内容顶部的下拉面板。 slide-down 面板有一个关闭按钮，当面板内容滚动时，该按钮应保持在视图中。将 .overlay 元素上的 .overlay-slidedown class 更改为 .overlay-fade，在这种情况下，关闭按钮将留在原处。

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

Answer 1

如果您在.overlay 内添加一个额外的层作为 .overlay-close 的兄弟层以仅解决 overflow-y: scroll;，那么 .overlay-close 上的 position: fixed; 将起作用。这个.overlay-content层也应该是100%width/height

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

查看更新的 Fidle 以获取演示。

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

Answer 2

The Solution for your issue will be

将 .overlay-close 放在 .overlay 之外

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

我相信这 question 解决了您的问题。

Child 与 position:fixed 滚动与 position:fixed、overflow:auto parent

Child with position:fixed scrolls with position:fixed, overflow:auto parent

css

css-transitions

css-transforms

css-animations