Spinnen zwei Bilder hinter einem Bild

Question

Ich habe zwei Bilder (Fahrradräder), die hinter der Fahrradrahmen Bild positioniert sind, aber wenn ich Javascript zum Drehen der Räder verwenden, scheinen sie vor dem Fahrradrahmenbild zu sein.

HTML

<div id="bike"> 
    <img src="frame.png"> 
</div> 

<div id="wheel"> 
    <img class="spin" src="wheel.png"> 
    <img class="spin" id="two" src="wheel.png"> 
</div>  

JS

$(function() { 
    var $elie = $(".spin"); 
    rotate(0); 
    function rotate(degree) {   
     $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});      
     timer = setTimeout(function() { 
      rotate(++degree); 
     },10); 
    } 
}); 

Answer 1

geben einen Z-Index auf dem Fahrrad div

Answer 2

Geben Sie einen höheren z-index Wert auf die div mit dem Fahrrad

<div id="bike" style="z-index: 2"> 
    <img src="frame.png"> 
</div> 

<div id="wheel" style="z-index: 1;">  
    <img class="spin" src="wheel.png"> 
    <img class="spin" id="two" src="wheel.png"> 
</div> 

Answer 3

Übernehmen Sie die fol Muhen CSS:

#bike{ 
     z-index:2; 
    } 

    #wheel{ 
     z-index:1; 
    } 

Answer 4

setzte das Rad div vor Fahrrad div im html

OR

geben z-Index 1 an das Motorrad div