I am designing an html5 mobile application that has an overlay that appears at various points in the app. The overlay may be at the top of the z index visually, but interactively, it sites behind a div below that is intercepting clicks intended for the overlay. I think I know why it is occurring (CSS stacking context for an element below) but I don't know how to work around it.
This issue is very similar to this prior question but the resolutions don't seem to apply in this instance. Stacking context has never messed with me before I started applying CSS3 animations and transforms to my layouts. Now I am a mess.
So far I have tried
-webkit-transform: translate3d(0,0,0); and a thousand different z-index approaches to try and keep the lower z-index elements from blocking clicks intended for the overlay. I am at a loss and could use some outside perspective.
If you use a translate3D in z to move your content back, it now works. Chang your div2 style to this:
-webkit-transform: translate3D(0px,0px,-1px) rotateX(180deg);
There is currently no discussion for this recipe.
This recipe can be found in it's original form on Stack Over Flow.