transform:scale() 打破了我的 z-index 顺序

Question

我确实设置了一个 HTML 页面，我使用 z-index 来设置元素的“视觉”顺序。它按预期工作；但是当我使用transform: scale()时会中断。

#blocks-both{
    transform: scale(0.9);
}

我在这里做了一个简化的例子：http : //codepen.io/anon/pen/LNYrar

我阅读了很多关于这个特定问题的消息，但我找不到使我的设计工作的解决方案。我想我不明白这方面的事情。

有人可以帮忙吗？

谢谢 ！

Answer 1

这是一个已知的问题：

• webkit转换translate3d后css z-index丢失
• webkit-transform 破坏了 Safari 上的 z-index
• webkit-transform 覆盖 Chrome 13 中的 z-index 排序

您可以在这里阅读更多相关信息，因为它提供了深入的解释。

除了不透明度之外，一些较新的 CSS 属性也会创建堆叠上下文。其中包括：转换、过滤器、CSS 区域、分页媒体以及可能的其他内容。作为一般规则，如果 CSS 属性需要在屏幕外上下文中渲染，则它必须创建一个新的堆叠上下文。

您可以通过将变换属性从#blocks-both移动到#block-main和#block-sidebar来避免此问题，如下所示：

#block-main, #block-sidebar {
  transform: scale(0.9);
}

#block-main {
  transform-origin: 100% 0;
}

#block-sidebar {
  transform-origin: 0 0;
}

我还编辑了你的示例。