CSS 定位position

子绝父相

一、简介

• 定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
• 定位 = 定位模式（指定元素在文档中的定位方式） + 边偏移（决定元素的最终位置）

 （一）定位模式

值	语义
position: static	静态定位
position: relative	相对定位
position: absolute	绝对定位
position: fixed	固定定位
position: sticky	粘性定位

 1、静态定位（static）的特点

• 静态定位的元素默认定位方式，无定位。
• 静态定位按照标准流特性摆放位置，无偏移量。

 2、相对定位（relative）的特点

• 相对与自己原来的位置来移动（移动位置的时候参照自己原来的位置）。
• 在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它，不占用它原来的位置（不脱标，继续保留原来的位置）

3、 绝对定位（absolute）的特点

• 相对于他的祖先元素来说（移动位置的时候参照祖先的位置）
• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准
• 如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位的祖先元素为参照点移动
• 绝对定位不占有原来的位置（脱标）

4、 固定定位（fixed）的特点

• 以浏览器的可视窗口为参照点移动元素
• 跟父元素无任何关系
• 不随滚动条滚动
• 脱标，可以看成是一种特殊的绝对定位

5、 粘性定位（sticky）的特点

• 以浏览器的可视窗口为参照点移动元素（固定定位的特点）
• 粘性定位占有原先的位置（相对定位的特点）
• 必须添加top、left、right、bottom其中一个才有效

（二） 边偏移

属性	描述
top	顶部偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离