我确实设置了一个HTML页面,在其中使用z-index来设置元素的可视"顺序.它按预期工作;但是当我使用 transform:scale()时会中断.
I did setup an HTML page where I use z-index to set the elements "visual" order. It works as expected; but breaks when I use transform: scale().
#blocks-both{ transform: scale(0.9); }我在这里做一个简化的例子: codepen.io/anon/pen/LNYrar
I make a simplified example here : 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.
有人可以帮忙吗?
谢谢!
推荐答案这是一个已知问题:
- 在进行webkit转换后,css z-index丢失了
- webkit-transform会破坏Safari上的z-index
- webkit-transform覆盖Chrome 13中的z-index顺序
您可以在此处,因为它提供了深入的解释.
You can read more about it here as it offers in depth explanation.
除了不透明之外,一些较新的CSS属性还创建了堆栈上下文.其中包括:转换,过滤器,css区域,分页媒体,可能还有其他.通常,如果CSS属性要求在屏幕外的上下文中进行渲染,则它必须创建一个新的堆栈上下文.
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 和#block-sidebar 来避免此问题这个:
You could avoid this issue by moving the transform properties from #blocks-both to #block-main and #block-sidebar like this:
#block-main, #block-sidebar { transform: scale(0.9); } #block-main { transform-origin: 100% 0; } #block-sidebar { transform-origin: 0 0; }我还编辑了您的示例.
更多推荐
transform:scale()打破了我的z
发布评论