css传统布局

css传统布局

1.static 默认值
2.relation 相对定位
3.absolute 绝对定位
4.fixed 固定定位

relation 相对定位
开启定位后，不设置偏移量元素不会发生任何变化
不脱离文档流
偏移量（offset）
通过偏移量来设置元素的位置
top
定位元素和定位位置上边的距离
bottom
定位元素和定位位置下边的距离
top，bottom一般只用一个
left
rigth
同上

absolute 绝对定位
脱离文档流，行内变成块
使元素提升层级
绝对定位元素是相对于其包含块（containing block）进行定位的
包含块：
正常情况下：包含块就是离当前元素最近的祖先块元素
开启绝对定位的包含块：包含块是离他最近的开启了定位的祖先元素
所有祖先元素没开启定位，则定位相对于根元素

fixed 固定定位
和绝对定位类似，唯一不同是固定定位永远参考于浏览器的视口进行定位