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

Question

我确实设置了一个 HTML 页面，我在其中使用 z-index 来设置元素 "visual" 顺序。它按预期工作；但是当我使用 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，因为它提供了深入的解释。

In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

您可以通过将转换属性从 #blocks-both 移动到 #block-main 和 [=25= 来避免此问题]#block-sidebar 像这样：

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

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

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

我也编辑了你的example。

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

transform:scale() breaking my z-index order

html

css

transform

z-index