什么是定位布局
可以通过上下左右四个方位完成自身布局的布局方式。
关键字:position(static|relative|absolute|fixed)
在通过top|bottom|left|right 进行定位。
注意点:当css样式中left和right共存的话采用left定位,top和bottom采用top定位。
文档流:
浏览器默认设置
position:static
相对定位:
参考系:自身原有位置,并不会脱离文档流,原有的位置依旧占据。
position:relative
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.left = -right | top = -bottom
3.布局后不影响自身原有位置
4.不脱离文档流
绝对定位
参考系:最近的定位父级
position: absolute; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.父级必须自己设置宽高
3.完全离文档流
固定定位:
参考系:整个html页面
position: fixed; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流
z-index
修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高