定位布局

定位布局

什么是定位布局:

​ 可以通过上下左右四个方位完成自身布局的布局方式

定位方式	参考系	是否脱离文档流
相对定位	自身原有位置	否
绝对定位	最近’‘定位’'父级	是
固定定位	文档窗口	是

二.相对定位

参考系:  自身原有位置
position: relative ==> 打来了四个定位方向
1. top | bottom | left | right 都可以完成自身布局,上下取上,左右取左
2. left = -right | top = -bottom
3. 布局后不影响自身原有位置
4. 不脱离文档流

三.绝对定位

参考系: 最近的定位父级
position: absolute; ==> 打开四个定位方位

1. top | bottom | left | right 都可以完成自身布局,上下取上,左右取左
2. 父级必须子级设置宽高
3. 一般父级采用的是相对定位布局,一般情况下,父级不需要脱离文档流
4. 完全脱离文档流

四.固定定位

参考系:页面窗口
position: fixed; ==> 打开四个定位方位

1.top | bottom | left | right 都可以完成自身布局,上下取上,左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流

五.z-indox

修改显示层级(在发生重叠时使用),值取正整数,值不需要排序,随意规定.
值大的显示层级高

流式布局的思想

流式布局思想: 尽可能不去使用固定属性

1. 百分比
2. vw | vh ==> max-width(height) | min-width(height)
3. em | rem