CSS3变换旋转打破布局和堆叠顺序，取代z-index

Question

我正在设计一个html5移动应用程序，它有一个叠加层，出现在应用程序的不同位置。 叠加层可以在视觉上位于z索引的顶部，但是交互式地，它位于下方的div后面，即拦截用于叠加层的点击。 我想我知道它为什么会发生（下面一个元素的CSS堆栈上下文），但我不知道如何解决它。

这个问题与之前的问题非常相似，但这些决议在这种情况下似乎并不适用。 在我开始应用CSS3动画并转换到我的布局之前，堆栈上下文从未搞砸过我。 现在我一团糟。

到目前为止，我尝试过transform-style: flat; -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); 以及一千种不同的z-index方法，试图阻止较低的z-index元素阻止用于覆盖的点击。 我不知所措，可以使用一些外部视角。

我有一个codepen，在这里完美地说明了这个问题 。

Answer 1

如果您使用z中的translate3D来移回您的内容，它现在可以使用了。 张你的div2风格到这个：

    -webkit-transform: translate3D(0px,0px,-1px) rotateX(180deg);