一.定位
标准文档流:块级元素会垂直排列,行内元素水平排列
浮动实现了多个块级盒子在一排无缝排列显示
定位:能够让我们把一个元素从它原本正常文档流中的位置移动到另一个位置
二.相对定位
- position:relative 定位属性:position 取值:relative
- 位置偏移量(坐标)
位置属性:top设置距离包含顶部的距离(上)
bottom设置包含底部的位置(下)
left设置包含左侧的位置(左)
right设置包含右侧的位置(右)
3.相对于元素在正常文档流中的位置移动它,把一个文档流中的元素从它的默认位置按坐标进行相对移动
它原本所占空间不变
4.特性:
不会脱离文档流
提升层级
使用场景:一般搭配绝对定位使用,当作绝对定位的父级【父相子绝】
三.绝对定位:相对于定位父级的位置进行移动,如果没有定位父级,一层一层往上找(找定位父级),一直找到body,直接相对于body定位
1.position:absolute
2.特性:
使元素脱离文档流
提升层级
三.固定定位:元素的位置相对于浏览器的窗口进行位置移动(即使窗口是滚动的,它也不会移动)
1.position:fixed
2.特性:
会使元素脱离文档流
提升层级