07 css定位
# 1.css布局的三种机制 #
> 网页布局的核心 --- 用来摆放盒子的位置
三种方法
1）普通流（标准流）
2）浮动
- 让盒子从普通流中浮起来，水平排列
3）定位
- 将盒子定在某一个位置、自由漂浮在其他盒子上(包括标准流和浮动)
- 所以我们脑海应该有三种布局机制的上下顺序
- 标准流最底层 浮动中层 定位的盒子高层
## 1.1 css定位详解 ##
定位也是用来布局的，它有两部分组成：
> `定位 = 定位模式 + 边偏移`
## 1.2 边偏移 ##
简单说， 我们定位的盒子，是通过边偏移来移动位置的。
在 CSS 中，通过 `top`、`bottom`、`left` 和 `right` 属性定义元素的**边偏移**：（方位名词）
| 边偏移属性 | 示例 | 描述 |
| ---------- | :------------- | -------------------------------------------------------- |
| `top` | `top: 80px` | **顶端**偏移量，定义元素相对于其父元素**上边线的距离**。 |
| `bottom` | `bottom: 80px` | **底部**偏移量，定义元素相对于其父元素**下边线的距离**。 |
| `left` | `left: 80px` | **左侧**偏移量，定义元素相对于其父元素**左边线的距离**。 |
| `right` | `right: 80px` | **右侧**偏移量，定义元素相对于其父元素**右边线的距离** |
## 1.3 定位模式 ##
在 CSS 中，通过 `position` 属性定义元素的**定位模式**，语法如下：
```css
选择器 { position: 属性值; }
```
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
| 值 | 语义 |
| ---------- | :----------: |
| `static` | **静态**定位 |
| `relative` | **相对**定位 |
| `absolute` | **绝对**定位 |
| `fixed` | **固定**定位 |
### 1.3.1 静态定位###
> 静态定位
是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。
- 静态定位 按照标准流特性摆放位置，它没有边偏移。
- 静态定位在布局时我们几乎不用的
### 1.3.2 相对定位 ###
> 相位定位
- 相对于现在位置进行移动
相对定位的特点：（务必记住）
- 相对于 自己原来在标准流中位置来移动的
- 原来**在标准流的区域继续占有**，后面的盒子仍然以标准流的方式对待它。
### 1.3.3 绝对定位 ###
如果父级没有定位 绝对定位子盒子以浏览器为准
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
绝对定位的特点：
- 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
- 不保留原来的位置，完全是脱标的。
因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。
子绝父相 —— 子级是绝对定位，父级要用相对定位。
### 1.3.4 固定定位 ###
只认浏览器的可视窗口
跟父级盒子定位没有任何关系
不随滚动条滚动
完全脱标
# 2.定位拓展 #
## 2.1 绝对定位盒子居中 ##
注意：绝对定位/固定定位的盒子不能通过设置 `margin: auto` 设置水平居中。
绝对定位水平居中的办法
1. `left: 50%;`：让**盒子的左侧移动父级元素的水平中心位置；
2. `margin-left: -100px;`：让盒子向左移动自身宽度的一半。
## 2.2 堆叠顺序z-index ##
绝对定位 默认：后来者居上
使用z-index
`z-index` 的特性如下：
1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. **数字后面不能加单位。
注意：`z-index` 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
## 2.3 定位改变display属性 ##
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
* 可以用inline-block 转换为行内块
* 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
* 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
