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

【问题标题】：transform:scale() breaking my z-index ordertransform:scale() 打破了我的 z-index 顺序
【发布时间】：2016-06-11 10:42:16
【问题描述】：

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

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

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

我阅读了很多关于这个特定问题的消息，但我找不到使我的设计工作的解决方案。我想我对此有些不理解。

有人可以帮忙吗？

谢谢！

【问题讨论】：

好困惑！为什么你在容器上使用transform: scale？
这是一个简化的示例，但我需要在此页面上使用 transform:scale（缩放内容并避免滚动条）
谁告诉你缩放元素会阻止滚动条？如果您不想要滚动条，您可以使用百分比或基于视口的布局（% 或 vh/vw 单位）或将 overflow:hidden 添加到正文
嗨，阿齐兹，感谢您的回复。我知道;但对于我的特定设计，我当时需要使用变换比例。我的问题不是如何避免滚动条，而是如何让我的 z-indexes 与 transform:scale() 一起工作...谢谢！
你为什么要缩放 #blocks-both 而不是 #block-main 和 #block-sidebar 个人？

【解决方案1】：

这是一个已知问题：

您可以阅读更多关于它的信息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。

【讨论】：