位置：固定的子级滚动位置：固定，溢出：自动父级答案

【问题标题】：Child with position:fixed scrolls with position:fixed, overflow:auto parent位置：固定的子级滚动位置：固定，溢出：自动父级
【发布时间】：2016-03-20 22:55:15
【问题描述】：

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

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

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

【问题讨论】：

标签： css css-transitions css-animations css-transforms

【解决方案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/

【讨论】：

你的小提琴不这样做，但这就是我所做的。我将 overflow:auto 从 .overlay 类移动到 .overlay-content 类，它也必须是 100% 宽度/高度
@lavirius 我的 JSFiddle 不知何故坏了，我用最后一个状态保存了它...很高兴它已解决。
@lavirius 感谢您更新答案。

【解决方案2】：

您的问题的解决方案将是

将.overlay-close 放在.overlay 之外

在这里查看我的编辑https://jsfiddle.net/xajk7uez/5/

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

【讨论】：

已经这样做了。在这种情况下，关闭按钮只是在面板向下和向上滑动时显示和隐藏，而不是面板的一部分，而是在面板内容移动时保持固定。
那么你应该在不使用转换的情况下实现它。
如果我不使用转换，我正在“实现”其他东西......不，到目前为止，解决方案是将滚动内容放在主容器内的子容器内，该容器向下滑动。