绝对定位与相对定位

绝对定位与相对定位

绝对定位

• 绝对定位：

  通过 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;