全回顾扫盲css--position定位有哪几种?

position定位常用的是

  • static:(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。
  • relative:(相对定位)是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响。
  • absolute:(绝对定位)是指给元素设置绝对的定位
  • fixed:可以简单说fixed是特殊版的absolute,fixed元素总是相对于body定位的。
  • inherit:继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。
  • sticky:CSS3新增属性,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

细节点描述

relative

relative类似于static和absolute的过度属性,它本身在普通文档流中,但是top/left等属性是生效等。

根据测试可以得出,position: relative后等元素,top值会使元素移动,但并不会影响到其他元素。对其他元素来说,relative元素在文档流中的位置并为变化。

relative元素的margin会改变其他元素的位置,并且margin值是在top值之后。

<div style="border: 2px solid #000;">
    <div style="border: 5px solid red; width: 100px;height: 100px;background:#cccc77;position: relative;top: 50px;margin-top: 20px;"></div>
    <div style="border: 5px solid green; width: 100px;height: 100px;background:#c2e7ff;"></div>
</div>

absolute

使用absolut定位的元素脱离文档流后,就只能根据祖先类元素(父类以上)进行定位,而这个祖先类还必须是以position非static方式定位的(relative,absolute,fixed,sticky)

如果祖先类定位是以static方式,则针对于更上一级。直到根据body定位。

祖先类的border和margin会让内部absolut元素偏移,但是padding却不会,如图:

<div style="border: 2px solid #000;">
    <div style="border: 5px solid red; width: 100px;height: 100px;background:#cccc77;position: relative;top: 50px;margin-top: 20px;"></div>
    <div style="border: 5px solid green; width: 100px;height: 100px;background:#c2e7ff;"></div>
</div>

Fixed

fixed元素总是相对于body定位的。

sticky

  • 该元素并不脱离文档流,仍然保留元素原本在文档流中的位置
  • 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。
  • 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量

随机浏览