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