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

Question

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

此问题与this prior question非常相似，但决议似乎并不适用于此实例。在我开始应用CSS3动画并转换到我的布局之前，堆栈上下文从未搞砸过我。现在我一团糟。

到目前为止，我已经尝试了transform-style: flat; -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0);和一千种不同的z-index方法来尝试保持较低的z-index元素不会阻止用于叠加层的点击。我不知所措，可以使用一些外部视角。

I have a codepen that illustrates the issue perfectly here

Answer 1

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

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