css文档流:
普通流:元素默认从上至下,从左至右的排列顺序
浮动流:添加了浮动后的排列顺序,脱离文档流(普通流)
定位流:添加了定位后的排列顺序,脱离文档流(普通流)
定位
定位:改变元素的位置(禁止在搭建页面结构过程中大面积使用定位)
position:定位;
坐标轴:
水平: left right
垂直: top bottom
定位值:
默认定位:static
[注]默认值,无法改变坐标属性
绝对定位:absolute
脱离文档流
能改变坐标属性,可以为负数
默认参考根元素(html),或者参考最近的有定位的父元素(默认定位除外)
相对定位:relative
占据文档流
能改变坐标属性,可以为负数
默认参考自身加载到浏览器中的初始位置
固定定位: fied
脱离文档流
能改变坐标属性,可以为负数
参考浏览器窗口改变自己的位置
在页面中固定不动
粘性定位:
占据文档流
能改变坐标属性,可以为负数
参考浏览器窗口改变自己的位置
在页面中固定不动
结合了相对定位和固定定位的特征
定位居中方式:
方法一:
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
方式二:
position: absolute;
left :50%;
margin-left:-宽度的一半;
top:50%;
margin-top:-高度的一半;