定位的组成
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式
边偏移决定了元素的最终位置
1、定位模式 position
语法:选择器 { position: 属性值; }
属性值 | 描述 |
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
2、边偏移
边偏移属性 | 描述 |
top | 顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离。 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
静态定位 (了解)
元素默认方式 无定位
语法:选择器 { position: static; }
- 静态定位 按照标准流特性摆放位置,它没有边偏移。
- 静态定位在布局时很少用。
相对定位
元素在移动时相对原来位置移动
语法:选择器 { position: relative; }
- 相对于 自己原来在标准流中位置来移动的
- 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
绝对定位 (重点)
元素以带有定位的父级元素来移动位置
语法:选择器 { position: absolute; }
-
完全脱标
-
父元素没有定位,则以浏览器为准定位
-
父元素要有定位
将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位
固定定位
元素固定于浏览器可视位置
语法:选择器 { position: fixed; }
- 完全脱标
- 以浏览器为相对
- 跟父元素没有任何关系
- 不随滚动条滚动
粘性定位 sticky
相对定位和固定定位的混合
语法:选择器 { position: sticky; }
- 以浏览器可视位置为参照
- 占有原先位置
- 必须指定top,right, bottom, left4个值之一,否则只会处于相对定位