css中的定位

Css中的定位有以下几种：

Static定位：这是默认方式，对static而言left、right属性不起作用

默认效果：

代码：

        <div class="s1">内容一</div>

        <div class="s1" id="special">内容二</div>

        <div class="s1">内容三</div>

        <div class="s1">内容四</div>  

Relative定位:是相对于元素本来的位置进行定位，元素的大小不发生变化，被定位的元素原来的空间任然保留，好像该元素任然在文档流中。特别说明：relative的参照点是元素原来的位置。

   效果图：

关键代码:     

 #special

 {

     position:relative;

 left:40px;

 top:100px;

 }

 Absolute定位：相当于元素从原来的流位置中脱离，并让出自己的空间，后序元素可以占用它让出的空间。特别说明：absolute是相对于离自己最近的非标准流盒子而言的
效果图：

关键代码：

#special

 {

     position:absolute;

 left:40px;

 top:100px;

 }

Fixed定位：效果上与absolute很像，不过参照点儿只是视窗（body）本身