z-index non mantenuta dopo css3 ruotare

Ho questo codice http://jsfiddle.net/C32Hx/4/z-index non mantenuta dopo css3 ruotare

<style> 
    body {margin-left:10px;} 
    #top {background:blue;width:30px;height:30px; 
    position:absolute; bottom:0; z-index:2;} 
    button {margin-top:200px} 
    #back {width:120px;height:100px;background:red; position:absolute} 
    #front {width:100px;height:100px;background:green; 
    position:absolute; margin-top:50px; z-index:0.8} 
    </style> 


    <div id="back"><div id="top"></div> back</div> 
    <div id="front">front</div> 
    <button onclick="rotate()">rotate</button> 


    <script> 
    function rotate() 
    { 
    document.getElementById("back").style.MozTransform = "rotate(10deg)"; 
    document.getElementById("back").style.WebkitTransform = "rotate(10deg)"; 
    document.getElementById("back").style.msTransform = "rotate(10deg)"; 
    document.getElementById("back").style.transform="rotate(10deg)"; 
    return false; 
    } 
    </script>

Dopo la rotazione, z-index non viene mantenuta sull'elemento #top.

Si prega di suggerire come risolvere questo problema.

Grazie.

fonte

2014-07-14 Arnold

Questo sembra essere un duplicato di http://stackoverflow.com/questions/6953497/webkit-transform-overwrites-z-index-ordering-in-chrome-13 –

Ho letto quel post. Dato che sono un novizio di css3, non riesco a correggere il codice. Potete per favore suggerire una soluzione per il mio problema. Grazie. – Arnold

Vedi http://jsfiddle.net/uR5MS/1/

Devi fare i tre div nello stesso contesto di stratificazione. È davvero inaspettato che il tuo codice possa mai rendere il div blu sopra tutti gli altri, dal momento che è nidificato a un div più alto.

body {margin-left:10px;} 
    #top {background:blue;width:30px;height:30px;position:absolute;bottom:0;z-index:3;top:70px;} 
    button {margin-top:200px} 
    #back {width:100px;height:100px;background:red;position:absolute; z-index:1} 
    #front {width:100px;height:100px;background:green;position:absolute;top:50px; z-index:2;}

Si dovrà ridisegnare il CSS in quanto il div sono ora assoluta e allo stesso livello di sovrapposizione. Vedi che lo z-index ora è conservato dopo le trasformazioni.

fonte

2014-07-14 15:07:49 Niloct

Trascino, ridimensiono e ruota #back. Quindi, anche #top dovrebbe andare avanti con #back. Quindi, devo cambiare la posizione di #top ogni volta che #back viene trascinato, ridimensionato o ruotato. Quindi, se non c'è altra soluzione, cercherò di implementare la tua soluzione. Ad ogni modo, grazie per la risposta. – Arnold

Capito. Penso che sia l'unica soluzione. Prego. – Niloct

Grazie. Seguirò il tuo suggerimento. – Arnold

Succede perché la funzione di trasformazione crea un contesto di stratificazione:

A causa del contesto di stratificazione, dopo la trasformazione del div bambino è intrappolato all'interno della parent zIndex per sempre.

fonte

2014-07-14 14:53:25 Luizgrs

puoi suggerire come risolvere questo problema nel mio codice? Grazie. – Arnold

z-index non mantenuta dopo css3 ruotare

risposta

Problemi correlati