1.浮动可以让多个盒子一行没有缝隙排列显示,经常用于横向排列盒子。
2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子。
定位组成：
定位：将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子。
定位 = 定位模式 + 变偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
定位模式
定位模式决定元素的定位方式,它通过css的position属性来设置,其值可以分为四个:
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移
边偏移就是定位的盒子移动最终位置。有top、bottom、left和right4个属性
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px | 底部偏移量,定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
静态定位 static(了解)
静态定位是元素的默认定位方式,无定位的意思。
语法：
选择器{position: static;}
静态定位按照标准流特性摆放位置,它没有边偏移
静态定位在布局时很少用到
相对定位 relative(重要)
相对定位是元素在移动位置的时候,相对于它原来位置来说的(自恋型)
语法：
选择器{position: relative}
相对定位的特点：
1.它是相对于自己原来的位置来移动的(移动位置的时候参照自己原来的位置)
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
因此,相对定位并没有脱标,它是典型的应用是给绝对定位当爹的。。。
绝对定位
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)
语法:
选择器{position:absolute;}
绝对定位的特点
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
2.如果祖先元素有定位(相对、绝对、固定定位)则以最近一级的有定位祖先元素为参考点移动位置的。
3.绝对定位不占用原来的位置(脱标)
定位
1.绝对定位和相对定位到底有什么使用场景呢？
子绝父相：子级使用绝对定位,父级则需要使用相对定位
2.为什么说相对定位给绝对定位当爹呢？
①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响到其他兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示
③父盒子布局时,需要占有位置,因此父亲只能是相对定位。
这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级
总结：因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位
当然,自绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到
固定定位fixed
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器{position: fixed}
固定定位的特点：
1.以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系
2.不随着滚动条滚动
3.固定定位不保留原来的位置