transform：scale（）打破了我的z-index顺序

Question

我设置了一个HTML页面，我使用z-index设置元素“可视”顺序。 它按预期工作;但是当我使用 transform：scale（）。

时会中断

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

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

我阅读了很多有关此特定问题的消息，但我无法找到解决方案来使我的设计工作。 我想我对此并不了解。

有人可以帮忙吗？

谢谢！

Answer 1

这是一个众所周知的问题：

• css z-index lost after webkit transform translate3d
• webkit-transform breaks z-index on Safari
• webkit-transform overwrites z-index ordering in Chrome 13

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

  

除了不透明度之外，一些较新的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;
}

我还编辑了您的example。