大虾们 帮帮忙 郁闷中！！！（关于图片重叠）

 在写一个幻灯片  但遇到问题 
我设的外框 宽 高 都为 300 图片 也是300  但我想让几张图片都重叠到 一起  用css 还是 JavaScript 那个好些？
  

解决方案 »

  1.   

    不行 我把图片 设为 z-index： 1  2   3  4   不管用 
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    .draw{
      position:absolute;
      width:300px;
      height:300px;
      left:100px;
      top:100px;
      background-color:#000;
    }
    #div1{
      z-index:1;
    }
    #div2{
      z-index:2;
    }
    #div3{
      z-index:3;
    }
    #div4{
      z-index:4;
    }
    </style>
    <script type="text/javascript">
    </script>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title></title>
    </head>
    <body>
    <div class="draw" id="div1">111
    </div>
    <div class="draw" id="div2">222
    </div>
    <div class="draw" id="div3">333
    </div>
    <div class="draw" id="div4">444
    </div>
    </body>
    </html>
      

  3.   

    <img style="position:absolation;z-index:1" src="01.jpg"/><img style="position:absolation;z-index:2" src="02.jpg"/><img style="position:absolation;z-index:3" src="03.jpg"/><img style="position:absolation;z-index:4" src="04.jpg"/>
      

  4.   


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

  5.   

    你这样，没有指定位置，不会叠在一起的。要用同样的LEFT，TOP。建议还是系统地看下CSS。
      

  6.   

    <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>
    呵呵。你发的那个帖子里面的absolute;不是absolation写错啦
    当然不行啦
      

  7.   

    用JavaScript控制图片的显示和叠换，代码现在我没写，所以我就知道用4个div就是层的显示和隐藏，再加个时间控制就行了