静态定位：
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top,bottom,left,right影响。
固定定位：
元素的位置相对于浏览器窗口是固定位置。
margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative不是最近的祖先定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolutetop:50pxleft:120px
<div box3
定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。
在这四种方案中，静态和相对定位不会影响整个文档的布局，而绝对和固定定位会与文档分开，因此页面不会为这两种类型的定位元素保留空间。 在默认状态下，所有元素都是静态放置的，即元素从上到下以及从左到右的顺序排列。
只要为元素设置了“ position”属性，就可以使用“ top”，“ right”，“ bottom”和“ left”属性精确定义其位置。
扩展资料：
相对定位中的“top”，“right”，“bottom”和“left”用于设置距元素原始位置的偏移量，但是绝对定位的四个属性不同。
在绝对定位中，“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说，已定位元素的边距和包含块的边界将影响top的值，进而影响绝对定位元素的位置，但包含块的填充将不起作用。
在相对定位中，“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”，是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离，“left”和“right”也是如此。
CSS position:static:默认属性，静态定位
relative:相对定位，相对于父元素的定位，需要配合top,left,right,bottom,z-index等属性
absolute:绝对定位，相对于父元素的定位，需要配合top,left,right,bottom,z-index等属性
fixed:固定定位，相对于父元素的定位，需要配合top,left,right,bottom,z-index等属性(IE6不支持)
你看一个例子就明白了。
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>CSS POSITION</title>
<style type="text/css">
.wrap{position:relativeheight:800pxz-index:1}
.ps, .pf, .pr, .pa{width:80pxheight:80pxline-height:80pxtext-align:centercolor:#FFFfont-weight:600font-size:18px}
.ps{position:staticbackground-color:silver}
.pf{position:fixedbackground-color:greentop:50%left:50%}
.pr{position:relativebackground-color:redtop:30pxright:-130pxz-index:10}
.pa{position:absolutebackground-color:orangetop:60pxleft:60px}
</style>
</head>
<body>
<div class="wrap">
<div class="ps">static</div>
<div class="pf">fixed</div>
<div class="pr">relative</div>
<div class="pa">absolute</div>
</div>
</body>
</html>
