[英]transform:scale() breaking my z-index order
I did setup an HTML page where I use z-index to set the elements "visual" order. 我设置了一个HTML页面,我使用z-index设置元素“视觉”顺序。 It works as expected;
它按预期工作; but breaks when I use transform: scale() .
但是当我使用transform:scale()时会中断。
#blocks-both{
transform: scale(0.9);
}
I make a simplified example here : http://codepen.io/anon/pen/LNYrar 我在这里做了一个简单的例子: http : //codepen.io/anon/pen/LNYrar
I read a lot of messages regarding this particular problem, but I can't find a solution to make my design work. 我阅读了很多关于这个特殊问题的消息,但我找不到让我的设计工作的解决方案。 I guess I don't understand something regarding this.
我想我对此并不了解。
Could someone help ? 有人可以帮忙吗?
Thanks ! 谢谢 !
This is a known issue: 这是一个已知的问题:
You can read more about it here as it offers in depth explanation. 您可以在这里阅读更多相关信息,因为它提供了深入的解释。
In addition to opacity, several newer CSS properties also create stacking contexts.
除了不透明度之外,一些较新的CSS属性还会创建堆叠上下文。 These include: transforms, filters, css-regions, paged media, and possibly others.
其中包括:转换,过滤器,css区域,分页媒体以及可能的其他媒体。 As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.
作为一般规则,似乎如果CSS属性需要在屏幕外上下文中进行渲染,则必须创建新的堆叠上下文。
You could avoid this issue by moving the transform properties from #blocks-both to #block-main and #block-sidebar like this: 您可以通过将转换属性从#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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.