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;