1. 为什么需要定位
一些固定盒子的效果,标准流或浮动都无法快速实现,此时需要定位来实现。所以:
浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。
2. 定位组成
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
2.1 定位模式
定位模式决定元素的定位方式,它通过 CSS 的 position 属性来设置,其值可以分为四个值:
例 position: relative;
top: 100px;
值 |
语义 |
static |
静态定位(无定位,相当于标准流,没有边偏移 |
relative |
相对定位(相对于原来) |
absolute |
绝对定位 |
fixed |
固定定位 |
2.2 边偏移
边偏移就是定位的盒子移动到最终位置。有 top, bottom, left 和 right 4 个属性
边偏移属性 |
示例 |
描述 |
top |
top:80px |
顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom |
bottom: 80px |
底部偏移量,定义元素相对于其父元素下边线的距离。 |
left |
left: 80px |
左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right |
right: 80p |