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后,他的位置就是相对本来位置进行偏移,且原来的位置会保存;

position:相对于有定位的祖先元素进行定位;若祖先元素都没有设置除static的定位,则相对于可视区定位

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

  2.有祖先元素定位(非static),没有设置top,right,bottom,left,该元素跟定位前的位置一样

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

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

  

猜你喜欢

转载自www.cnblogs.com/Qian-ManNi/p/11089957.html