为什么图片不能重叠？大家帮忙改下

<html>
<head>
<title>幻灯片</title>
<style type="text/css">
#main{border:3px solid #000; width:300px; height:300px;}
#div_pic img{width:300px;height:300px;}
</style>
</head>
  <body>
   <!--外框-->
   <div id="main"> 
   <!--图片层-->
   <div id="div_pic">                   
   <span style="position:absolation;z-index:1"><img src="01.jpg"/></span>
   <span style="position:absolation;z-index:2"><img src="02.jpg"/></span>
   <span style="position:absolation;z-index:3"><img src="03.jpg"/></span>
   <span style="position:absolation;z-index:4"><img src="04.jpg"/></span>
   </div>
   </div>
   <!--
   <script type="text/javascript">
  
   </script>
   -->
   </body>
</html>

解决方案 »

  1.   


    <html>
    <head>
    <title>幻灯片</title>
    <style type="text/css">
    #main{border:3px solid #000; width:300px; height:300px;}
    #div_pic img{ width:300px; height:300px;}
    </style>
    </head>是absolute;不是absolation
      <body>
      <!--外框-->
      <div id="main"> 
      <!--图片层-->
      <div id="div_pic">   
      <span style="position: absolute; z-index:1"><img src="01.jpg"/></span>
      <span style="position: absolute; z-index:2"><img src="02.jpg"/></span>
      <span style="position: absolute; z-index:3"><img src="03.jpg"/></span>
      <span style="position: absolute; z-index:4"><img src="04.jpg"/></span>
      </div>
      </div>
      <!-- 
      <script type="text/javascript">
      
      </script>
      -->
      </body>
    </html>
    下个css.chm文档，不会的查查！
      

  2.   

    position:absolation;->position: absolute;
      

  3.   

    position:absolation写错啦
    position:absolute