CSS定位

 <style type="text/css">
     #div1{
         height: 100px;
         width: 500px;
         background-color: blue;
         position: fixed;
         border-radius: 20px;
         z-index: 2;
   }
     #div2{
         height: 100px;
         width: 500px;
         left: 50px;
         top: 50px;
         background-color: red;
         position: fixed;
         border-radius: 20px;
         z-index: 0;
   }
     #div3{
         height: 100px;
         width: 500px;
         left: 100px;
         top: 80px;
         background-color: yellow;
         position: fixed;
         border-radius: 20px;
         z-index: 1;
     }

    </style>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
    for(var i = 0;i < 100 ;i++ ){
        document.write(i + "<br />");}
</script>

<div id="continer">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    LIPENGLIPENGLIPENG
</div>

  <style type="text/css">
     #div1{
         height: 100px;
         width: 50px;
         background-color: blue;
         border-radius: 20px;
         float: left;
   }
     #div2{
         height: 100px;
         width: 100px;
         background-color: red;
         border-radius: 20px;
         float: left;
   }
     #div3{
         height: 100px;
         width: 100px;
         background-color: yellow;
         border-radius: 20px;
         float: left;
     }
    #continer{
        height: 300px;
        width: 240px;
        background-color:gray;
        border-radius: 20px;
        float: left;
    }
    </style>

    <style type="text/css">
     #div1{
         height: auto;
         width: 500px;
         margin: 100px auto;
    }
    li {
        list-style: none;
}
    ul{
        width: 25px;
        float: left;
     }
    </style>

<div id="div1">
    <ul>
        <li><img src="img/1.jpg" title="1"></li>
        <li><img src="img/2.jpg"  title="2"></li>
        <li><img src="img/3.jpg"></li>
    </ul>
    <ul>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
        <li><img src="img/6.jpg"></li>
    </ul>
    <ul>
        <li><img src="img/7.jpg"></li>
        <li><img src="img/8.jpg"></li>
        <li><img src="img/9.jpg"></li>
    </ul>
</div>