唉，乱七八糟。忍不了了！
我先给你按照我的理解说下，然后给你网站去理解吧，我也是从哪里理解的！
文档流的几种：
1.正常文档流。
2.浮动文档流。
3.定位的文档流。
其中你问的是定位。
定位又分为2中：
相对很绝对。
相对定位的文档流，保持占位，仍占据原来正常文档流的位置。在此基础上进行的
left:100px top:100px //一个表示从原来的占位点，向右、下各平移100PX。
绝对定位会脱离文档流，也就是出现了层叠覆盖的情况。
left:100px top:100px 它究竟跑哪里了呢？
这个坐标是以最近定位父元素为参考点的。
知道了这点你就可以计算了。
一般你需要先设置一个相对定位元素，然后在其里面定位绝对定位，这是最常见的！
几个例子：
<div style="width:100px height:100px background-color:#c00">
<p style="width:50px height:50px">
<span style="position:absoluteleft:0 top:0 display:inline-block width:10px height:10px">我绝对定位了</span>
</p>
</div>
这个运行后
没有遇到已定位的父元素，于是BODY作为参照。
<div style="width:100px height:100px background-color:#c00">
<p style="width:50px height:50px background-color:yellow position:relative">
<span style="position:absoluteleft:0 bottom:0 display:inline-block width:10px height:10px background-color:blue"></span>
</p>
</div>
这个例子你自己运行吧。
还有：
<div style="width:100px height:100px background-color:#c00position:relative">
<p style="width:50px height:50px background-color:yellow ">
<span style="position:absoluteleft:0 bottom:0 display:inline-block width:10px height:10px background-color:blue"></span>
</p>
</div>
img 不要用浮动
简单点的做法就是 把 img 也设置为 position:absolutetop:0width:100%height:100%
left先不设置 然后用js判断有几个 img 给个循环 js代码大概如下：
//js部分for(var i = 0 i < img.length i++){
//动态设置img的left
//js
img.style.left = (i*200)+"px"
}
//补充： 在循环结束后 要设置 #1的width属性为 img.length*200
之后的轮播可以 就改变 #1这个div的 left 属性 每次都是 一张图片的大小 200px 当然应该设置的是 -200px
最好是可以给一个计数器， 现在显示的是第几张图片，再判断如果是最后一张 下一次轮播就播放第一张 也就是 #1 的left = 0
如果不太明白 可以设置 #k的overflow:auto 来看效果。
做了个例子给你参考一下：
<!DOCTYPE><html>
<head>
<title></title>
<style type="text/css">
#k{width:200px height:280px position:relative border:solid 1px #cccbackground-color:#eee overflow:hidden}
#img_box{position:absolute top:0left:0}
#img_box img{width:200pxheight:280px position:absolute top:0}
</style>
<script type="text/javascript">
function Onload() {
var imgs = document.getElementsByTagName("img")
img_box.style.width = (imgs.length * 200) + "px"
for (var i = 0 i < imgs.length i++) {
imgs[i].style.left = (i * 200) + "px"
}
}
</script>
</head>
<body onload="Onload()">
<div id="k">
<div id="img_box" class="a">
<img src="" alt="图片1" style="background-color:Red" />
<img src="" alt="图片2" style="background-color:Blue" />
<img src="" alt="图片3" style="background-color:Green" />
<img src="" alt="图片4" style="background-color:Yellow" />
</div>
</div>
</body>
</html>
区别并不是很大。主要看个人习惯以及css文件的大小了。如果css样式不多，那基本都可以；如果很多的话，建议两个配合着用。可以这么理解，class是类属性，可以无限制的使用，并且在全局符合样式规范的地方均可用。
id是身份标识，它下面其实也主要是class样式。但它标识了身份，html中只有这调用这个身份的代码才能享有这些样式。另外一个最大的不同是，id的样式，在html页面中只能引用一次，而class是无限制的。还有就是JS代码牵扯的样式只能用id来提供。
如果只是普通简单的样式，那都可以通用。比如你要引用style2样式，可以写
.style1 .style2 { }
#style1 .style2 { }
再在html中分别引用，效果是一样的。但要注意#style1只能被引用一次。
