スタックされたHTML要素の順序

jQueryスクリーンキャスト（jQuery for Absolute Beginners: Day 8）を見ています。それはこのコードを持っています：スタックされたHTML要素の順序

<script type="text/javascript"> 
    $(function() { 
     $('.wrap').hover(function() { 
      $(this).children('.front').stop().animate({ "top" : '300px'}, 900); 
     }, function() { 
      $(this).children('.front').stop().animate({ "top" : '0'}, 700);  
     }); 
    }); 
</script> 

<style type="text/css"> 

#container { 
width: 850px; 
text-align: center; 
margin: auto; 
} 

.wrap { 
width: 250px; 
height: 140px; 
position: relative; 
overflow: hidden; 
padding: 0 1em; 
} 

img { 
position: absolute; 
top: 0; left: 0; 
} 
</style> 
</head> 

<body> 
<div id="container"> 
    <div class="wrap"> 
     <img src="back.jpg" alt="image" /> 
     <img src="front.jpg" class="front" alt="image" /> 
    </div> 
</div> 
</body> 
</html>

back.jpgの上にfront.jpgが表示されるのはなぜですか？ front.jpgはback.jpgのタグの後に来るタグに含まれているからですか？

出典

2009-06-02 hekevintran

は、これは本当にHTML、CSSをタグ付けする必要があります。また、jQueryを掘り下げる前に、html/cssをよく知っておくことをお勧めします。これは一般に2つを操作するために使用されるためです。 –