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;

  

原文地址:https://www.cnblogs.com/Qian-ManNi/p/11089957.html