DIV+css定位

请大家看看如下的定义及排出的结果：

 

代码

< html >

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 新建网页 1 </ title >
< style >
#container  { margin : 0 auto ;  width : 100% ; background : #ff0000 ; }
#div1  {  height : 300px ;  width : 100px ;  background : #9c6 ;  margin-bottom : 0px ; }
#div2  {  height : 100px ;  width : 100px ;  background : #0c6 ;  margin-left : 100px ;  margin-top : -300px ; }

#div3  {  height : 50px ;  width : 80px ;  background : #009c60 ; margin-left : 100px ;  margin-top : 0  }
#div4  {  height : 100px ;  width : 100px ;  background : #00c600 ; margin-left : 100px ;    }

#div5  {  height : 100px ;  width : 200px ;  background : #c6ff00 ; margin-left : 200px ;  margin-top : -250px ;   }

#div6  {  height : 200px ;  width : 100px ;  background : #ffc600 ; margin-left : 100px ; margin-top : 150px ;    }
#div8  {  height : 200px ;  width : 100px ;  background : #ff00ff ; margin-left : 300px ;  margin-top : -350px ; }
#div7  {  height : 200px ;  width : 100px ;  background : #ffc600 ; margin-left : 400px ; margin-top : -300px ; }


#header  {  height : 100px ;  background : #9c6 ;  margin-bottom : 0px ; }
#menu  {  height : 20px ;  background : #693 ;  margin-bottom : 0px ; }
#mainContent  {  background : url(bg.gif) 0 0 repeat-y ;  overflow : auto ; zoom : 1 ;  margin-bottom : 1px ; }
#sidebar  {  float : left ;  width : 200px ; background : #cf9 ;  height : auto !important ;  height : 100px ; }
#content  {  margin-left : 205px !important ;  margin-left : 202px ;  height : auto !important ;  height : 100px ;  background : #ffa ; }
#footer  {  height : 60px ;  background : #9c6 ; }
.clearfloat  {  clear : both ;  height : 0 ;  font-size :  1px ;  line-height :  0px ; }

</ style >
</ head >

< body >
< div  id ="container"   >
< div  id ="div1" > div1 </ div >
< div  id ="div2" > div2 </ div >
< div  id ="div3" > div3 </ div >
< div  id ="div4" > div4 </ div >
< div  id ="div5" > div5 </ div >
< div  id ="div6" > div6 </ div >
< div  id ="div8" > div8 </ div >
< div  id ="div7" > div7 </ div >


</ div >
< div  style ="position: absolute; width: 100px; height: 100px; z-index: 1; left: 379px; top: 245px"  id ="layer1" >
　 </ div >
</ body >

</ html >

 

 

 

 

   特别注意div1-8在container中出现的先后次序再对照定义，或许会有些感悟。