文章目录
1. 为什么需要
标准流和浮动无法做到:
- 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子
- 滚动窗口时,盒子固定在屏幕的某个位置
2. 定位组成
将盒子定在某一位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
2.1 定位模式
用于指定一个元素在文档中的定位方式
通过CSS的position属性设置
position: static; /*静态定位*/
position: relative; /*相对定位*/
position: absolute; /*绝对定位*/
position: fixed; /*固定定位*/
2.2边偏移
决定了该元素的最终位置
top: 80px; /*顶端偏移量,定义元素相对于其父元素上边线的距离*/
bottom: 80px; /*底部偏移量,定义元素相对于其父元素下边线的距离*/
left: 80px; /*左侧偏移量,定义元素相对于其父元素左边线的距离*/
right: