html - CSS3 transform rotate breaks layout and stacking order, superseding z-index -


I'm designing an HTML5 mobile app, in which the app has an overlay that appears at different points. The overlay XEx may be visually impaired on the top of the index, but interactively, the sites behind one of the following are intercepting the desired clicks for the overlays. I think I know why this is happening (CSS is stacking reference for the reference given below for an element), but I do not know how to work around it.

Enter image details here

This problem is very similar But in this example the resolution does not apply. Before starting to implement CSS3 animation and before converting to my layout, the stacking context has never happened to me. Now I am a mess.

So far I have tried conversion-style: flat; -webkit-transform: translateZ (0px); -WebKit-transform: translation 3D (0,0,0); And approaches to keeping and keeping Z-index elements less than blocking the desired clicks for a thousand different Z-index outlets. I am at a loss and can use some outside perspective.

If you use 3D in a z translation to move your content back, It now works: Change your div2 style to:

  - Winkit-conversion: Translated 3D (0 pixels, 0 pixels, -1 px) rotate x (180 degrees);    

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -