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);