position的用法以及遇到的问题

position：static|relative|absolute|fixed

 

static:position默认值。忽略top,right,bottom,left,z-index;可用于取消元素的定位

 

relative:相对定位。相对于自身的位置进行定位。

　　1.没有设置top,right,bottom,left,默认的位置就是本来未定位的位置；或者是相当于样式值为static;

　　2.设置top,right,bottom,left后,他的位置就是相对本来位置进行偏移，且原来的位置会保存；

 

absolute:绝对定位。相对于有定位的祖先元素进行定位；若祖先元素都没有设置除static的定位，则相对于可视区定位；设置后，该元素就是一个块级元素

　　1.有祖先元素定位（非static），设置了top,right,bottom,left,该元素相对于祖先定位元素进行定位

　　2.有祖先元素定位（非static），没有设置top,right,bottom,left，该元素跟定位前的位置一样；或者是相当于样式值为static;

　　3.没有祖先元素定位，设置了top,right,bottom,left,该元素相对于可视区进行定位

　　4.没有祖先元素定位，没有设置top,right,bottom,left，该元素跟定位前的位置一样

　　

fixed：固定定位。相对于浏览器窗口进行定位（与是否有祖先定位元素无关）

　　1.设置了top,right,bottom,left,该元素相对于浏览器窗口进行定位（位置值始终固定）

　　2.没有设置top,right,bottom,left，该元素跟定位前的位置一样；或者是相当于样式值为static;