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.
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 If you use 3D in a z translation to move your content back, It now works: Change your div2 style to: 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.
- Winkit-conversion: Translated 3D (0 pixels, 0 pixels, -1 px) rotate x (180 degrees);
Comments
Post a Comment