使用 CSS 变换比例打破位置：固定

Question

我遇到了一个奇怪的问题，我想知道这是否是渲染引擎中的错误 - 它发生在我测试过的 WebKit 和 Firefox 中。

如果您有一个固定在页面上的div，并且您在其中添加另一个div 并将其设置为固定（以在固定弹出窗口中获得固定标题），您可以确保标题将即使用户滚动弹出窗口，它仍然可见。除非您在弹出窗口上设置 transform scale - 这样做会破坏 position:fixed 并导致它不再固定到父 div 的顶部，而是会随着内容滚动。这是预期的行为 - 我该如何解决？

JSFiddle

Answer 1

transform: scale(x) 会将元素从坐标流中分离出来，因此不能有固定的位置。

我建议将#header 下方的文本换成带有overflow: auto 的受限div。 fixed 祖先的 fixed 子代并没有多大意义，但我可以看出你的目的。