标准文档流;块级元素会垂直排列,行内元素水平排列浮动实现了多个块级盒子在一排无缝排列显示
定位;能够让我们把一个元素从他原本在正常文档流的位置移动到另一个位置
相对定位
position
取值;relative
位置属性top设置包含块顶部的距离
bottom设置距离包含块底部的距离
left设置距离包含块左侧的距离
right设置距离包含块右侧的距离
相对元素在正常文档流中的位置移动它,把一个正常文档流的元素从它的默认值位置安坐标进行相对移动(相对定位他是相对于元素本身的位置发生移动)他原本所占的空间不会变
特性
不会脱离文档流
提升层级
在不定义位置偏移属性时,对元素没有影响
使用场景:一般搭配绝对定位使用大绝对定位的父级(父相子绝)
绝对定位
position
取值:absolute
特性:脱离文档流
提升层级
绝对定位:相对于定位父级的位置进行移动,如果没有定位父级,一层一层的往上找,一直找到body,相对于body进行定位
固定定位(元素的位置相对浏览器的窗口进行位置移动)
语法:positon:fixed
特性:会使元素脱离文档流
提升层级
静态定位:把元素放在文档流的默认位置,盒子垂直排列html元素的默认值,也就是没有定位正常的文档流布局方式
语法:position:static
特性:元素不会受到位置偏移属性的影响
用于重置定位属性