css盒子定位

盒子定位

position:relative;		相对定位
position:absolute;		绝对定位
position:fixed;			固定定位

• 先说相对定位relative：

• 相对定位是指盒子的位置相对于该盒子当前位置的偏移量，相对定位移动之后的盒子仍然属于标准流，但之前在标准流当中的位置仍然占有

• 绝对定位absolute:

• 当没有祖先元素时，则会以页面左上角为基准偏移

• 以祖先元素为基准，多用于嵌套的div盒子定位

• 祖先元素若有定位则参照祖先元素的位置进行偏移，祖先元素无定位时会以最近一个有定位的祖先元素为基准偏移（上级元素没有定位，若上上级有则参照上上级元素）

---

相对/绝对定位

• 子绝父相：
• 子元素使用绝对定位，父级元素用相对定位。
• 父盒子会在页面上占据一定位置，而子盒子则会以父盒子的左上角为原点进行偏移。而子盒子使用的绝对定位，完全脱离标准流，不会对其周边元素产生影响

固定定位

• 固定定位fixed
• 使用固定定位将元素固定在页面某个位置，页面滚动时元素不会随之移动