堆疊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>

爲什麼front.jpg出現在back.jpg的頂部？是因爲front.jpg在back.jpg標籤後面的標籤中？

來源

2009-06-02 hekevintran

這應該被標記HTML，CSS。我還建議你在深入jQuery之前熟悉html/css，因爲它通常用於操縱這兩者。 – 2009-06-02 02:31:56