Position定义： position 属性规定元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
在介绍postion值之前先给大家介绍一下 z-index的使用，它可被用于将在一个元素放置于另一元素之后，决定了一个html元素层叠级别。元素层叠级别是相对于元素在Z轴上（X轴与Y轴的平面相垂直相的平面）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部(值越大越在上层，可以允许有负数值)。
absolute(绝对定位)： 脱离了文本流（即在文档中已经不占据位置），absolute在没有设定TRBL值时是根据父级对象（此对象定位必须为脱离文档流的定位，否则就以body为其父元素）的坐标作为始点的(图1)，当设定TRBL值后则根据浏览器的左上角作为原始点(图2)。
relative（相对定位）：相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。
fixed(固定定位)： 元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
<style> #child{ width: 200px; height: 200px; background: #0099FF; position: fixed; left: 200px; top: 200px; } #parent{ width: 400px; height: 2200px; background: red; margin-top: 200px; margin-left: 200px; position: absolute; } </style> <body> <div id="parent"> <div id="child"></div> </div> </body>
过程一
过程二
从上面的两个过程中可以看出fixed是相对于浏览器的窗口进行定位。
inherit(继承定位)：规定应该从父元素继承 position 属性的值。
#child{ width: 200px; height: 200px; background: #0099FF; position: inherit; left: 100px; top: 100px; } #parent{ width: 400px; height: 2200px; background: red; margin-top: 200px; margin-left: 200px; position: absolute; } <body> <div id="parent"> <div id="child"></div> </div> </body>
从父元素那儿继承了absolute属性，使得child相对于父元素left: 100px;
top: 100px;
initial(还原定位): initial的作用是把属性设置回默认值。
static(静态定位)：如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他值。