CSS学习—定位

定位的组成

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式

边偏移决定了元素的最终位置

1、定位模式 position

语法：选择器 { position: 属性值; }

属性值	描述
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2、边偏移 

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

静态定位 （了解）

元素默认方式 无定位

语法：选择器 { position: static; }

1. 静态定位 按照标准流特性摆放位置，它没有边偏移。
2. 静态定位在布局时很少用。

相对定位

元素在移动时相对原来位置移动

语法：选择器 { position: relative; }

1. 相对于 自己原来在标准流中位置来移动的
2. 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位  （重点）

元素以带有定位的父级元素来移动位置 

语法：选择器 { position: absolute; }

1. 完全脱标 

2. 父元素没有定位，则以浏览器为准定位

3. 父元素要有定位
   将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位

固定定位 

元素固定于浏览器可视位置

语法：选择器 { position: fixed; }

1. 完全脱标
2. 以浏览器为相对
   • 跟父元素没有任何关系
   • 不随滚动条滚动

 粘性定位 sticky

相对定位和固定定位的混合

语法：选择器 { position: sticky; }

1. 以浏览器可视位置为参照
2. 占有原先位置
3. 必须指定top,right, bottom, left4个值之一，否则只会处于相对定位