Html 变换：scale（）打破我的z索引顺序

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

我在这里举一个简单的例子：

我读了很多关于这个特殊问题的信息，但是我找不到一个解决方案来让我的设计工作。 我想我不明白这件事

有人能帮忙吗

---

谢谢

这是一个已知的问题：

您可以阅读更多关于它的内容，因为它提供了深入的解释

除了不透明度，几个较新的CSS属性还创建堆叠上下文。这些包括：转换、过滤器、css区域、分页媒体，可能还有其他。一般来说，如果CSS属性需要在屏幕外的上下文中进行渲染，那么它必须创建一个新的堆叠上下文

通过将变换属性从#块移动到#块主和#块边栏，可以避免此问题，如下所示：

#块主，#块侧边栏{
变换：比例（0.9）；
}
#区块干线{
变换原点：100%0；
}
#块边栏{
变换原点：0；
}

---

我还编辑了你的。

太困惑了！为什么在容器上使用了

transform:scale

？这是一个简化的示例，但我需要在此页面上使用transform:scale（以缩放内容并避免滚动条）。谁告诉过你缩放元素会阻止滚动条？如果您不需要滚动条，可以使用百分比或基于视口的布局（

%

或

vh

/

vw

单位）或将

溢出：隐藏

添加到bodyHi Aziz，感谢您的回复。我知道,；但对于我的特殊设计，我需要在那个时刻使用变换比例。我的问题不是如何避免滚动条，而是如何使我的z索引与transform:scale（）一起工作。。。谢谢你为什么要分别缩放#块主和#块侧边栏而不是#块主和#块侧边栏？

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