定位布局(Positioning)
相对定位、绝对定位、固定定位元素都有定位属性left,right,top,bottom。
静态定位(Staticpositioning) position:static;
- 是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。
相对定位(Relativepositioning) position:relative;
- 与静态定位相似
- 不脱离文档流,原先位置保留
- 如果不设置top,bottom,left,right属性,依然在原位置
- 对于相对定位的元素我们可以通过属性top,bottom,left,right来改变元素最终的位置。元素移动的时候是相对于【当前元素所在的位置】进行移动。
利用相对定位制作一个左中右的覆盖布局
left,right元素会定位在center元素的上层,设置定位position:relative;再对元素进行top,bottom设置,但是元素之前所在位置还会有占位,会出现空隙。