transform:scale() 破坏了我的 z-index 层级顺序。

Question

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

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

我在这里提供一个简化的例子：http://codepen.io/anon/pen/LNYrar 我看到很多有关这个问题的信息，但是我找不到解决方法来使我的设计生效。 我猜我对此有所误解。

可以有人帮忙吗？

谢谢！

- gordie

---

好困惑啊！为什么你在容器上使用了 transform: scale？ - Pedram

嗨 Aziz，谢谢你的回复。我知道这一点；但对于我的特定设计，我需要在那个时刻使用transform-scale。我的问题不是如何避免滚动条，而是如何使我的z-indexes在启用transform：scale（）时起作用......谢谢！ - gordie

你说的手动设置z-index是什么意思？顺便说一下，我需要一个水平比例尺，不仅仅是避免滚动条。这就是为什么我使用比例尺的原因。 - gordie

你为什么要缩放 #blocks-both 而不是单独缩放 #block-main 和 #block-sidebar 呢？ - Cosmin Ababei

@ Cosmin Ababei：没有，没有理由这样做... - gordie

Answer 1

这是一个已知的问题：

• CSS z-index在使用webkit transform translate3d后丢失
• WebKit Transform会破坏Safari上的z-index
• WebKit Transform在Chrome 13中覆盖了z-index顺序

您可以在这里阅读更多信息，该文章提供了深入的解释。

除了不透明度之外，几个新的CSS属性也会创建堆叠上下文。这些包括：变换、滤镜、css-region、分页媒体，以及可能还有其他属性。一般来说，如果一个CSS属性需要在屏幕外渲染，它必须创建一个新的堆叠上下文。

您可以通过将#blocks-both中的transform属性移动到#block-main和#block-sidebar中来避免此问题，代码如下：

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

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

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

我已经编辑了你的 示例。

- Cosmin Ababei