transform:scale()打破了我的z-index顺序 [英] transform:scale() breaking my z-index order

问题描述

我确实设置了一个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);
}

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

I make a simplified example here : 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.

有人可以帮忙吗?

谢谢！

推荐答案

这是一个已知问题:

• 在进行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-index顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！