绝对定位与相对定位
绝对定位
-
绝对定位:
通过 left、right 属性来定义水平偏移量,top、bottom 属性来定义垂直偏移量
只要父级元素设了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的),
绝对定位(Absolute positioning)元素定位的参照物是其包含块,既相对于其包含块进行定位,不一定是其父元素
-
总结:
当子元素设置position: absolute的时,父元素必须设置position属性,设置为position: relative最理想。
原因:如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位,(这样浅显易懂)
position: absolute;
相对定位
-
相对定位
通过 left、right 属性来定义水平偏移量,top、bottom 属性来定义垂直偏移量
当一个元素的 position属性设置为 relative,它将使用相对定位。相对定位的元素在普通流中进行定位,它将出现在文档流中原本的位置。然而,可以通过设置水平或垂直偏移量,使它相对于原本的位置,偏移指定的距离,移动到新的位置。如果没有设置偏移,或设置的偏移量为 0,那么它仍将保持在原来的位置
总结:
相对定位使用四个属性值后,会保留原来位置,位置移动,依旧会占有原来位置
position: relative;