CSS 布局机制之定位

定位(position)

1. 概念

将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面

2. 详解

定位 = 定位模式 + 边偏移

2.1 边偏移

我们定位的盒子，是通过边偏移来移动位置的。
在 CSS 中，通过 top 、 bottom 、 left 和 right 属性定义元素的边偏移：（方位名词）

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

注意：定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。

2.2 定位模式

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

定位模式有多种分类，在不同的情况下，我们用不同的定位模式。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.2.1 静态定位（static）

1）静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。
2）静态定位 按照标准流特性摆放位置，它没有边偏移。
3）静态定位在布局时我们几乎不用的

2.2.1 相对定位（relative）

相对定位是元素相对于它 原来在标准流中的位置 来说的。

相对定位的特点

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

2.2.3 绝对定位（absolute）

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

绝对定位的特点：

完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素有定位，则元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

定位口诀 —— 子绝父相

子级是绝对定位，父级要用相对定位。

2.2.4 固定定位（fixed）
固定定位特点：

 完全脱标 —— 完全不占位置；
 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
 	跟父元素没有任何关系；单独使用的
 	不随滚动条滚动。

3. 堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

4. 定位改变display属性

display 是 显示模式， 可以改变显示模式有以下方式:

可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高
度等。

5. 总结

| 定位模式 | 是否脱标占有位置 |移动位置基准 |模式转换（行内

块）	使用情况
静态static	不脱标，正常模式
相对定位relative	不脱标，占有位置
绝对定位absolute	完全脱标，不占位置
固定定位fixed	完全脱标，不占有位置

注意：

边偏移需要和定位模式联合使用，单独使用无效；
top 和 bottom 不要同时使用；
left 和 right 不要同时使用。