css 定位

前端开发/CSS/nav.md

@@ -121,4 +121,5 @@ href | 定义所链接外部样式表文件的URL，可以是相对路径，也
 - [行高](./行高.md)
 - [背景](./背景.md)
 - [盒子模型](./盒子模型.md)
-- [浮动](./浮动.md)
+- [浮动](./浮动.md)
+- [定位](./定位.md)

前端开发/CSS/定位.md

@@ -0,0 +1,62 @@
+# 定位
+
+将盒子**定**在某一个**位**置 自由的漂浮在其他盒子(包括标准流和浮动)的上面
+
+> 定位 = 定位模式 + 边偏移
+
+## 边偏移
+
+边偏移属性    | 示例             | 描述
+-------- | :------------- | --------------------------------
+`top`    | `top: 80px`    | **顶端**偏移量，定义元素相对于其父元素**上边线的距离**。
+`bottom` | `bottom: 80px` | **底部**偏移量，定义元素相对于其父元素**下边线的距离**。
+`left`   | `left: 80px`   | **左侧**偏移量，定义元素相对于其父元素**左边线的距离**。
+`right`  | `right: 80px`  | **右侧**偏移量，定义元素相对于其父元素**右边线的距离**
+
+## 定位模式
+
+```css
+选择器 { position: 属性值; }
+```
+
+| 值         |     语义     |
+| ---------- | :----------: |
+| `static`   | **静态**定位 |
+| `relative` | **相对**定位 |
+| `absolute` | **绝对**定位 |
+| `fixed`    | **固定**定位 |
+
+### 静态定位(static)
+
+**静态定位**是元素的默认定位方式
+
+### 相对定位(relative)
+
+- **相对定位**是元素**相对**于它原来在标准流中的位置来说的
+- 原来**在标准流的区域继续占有**，后面的盒子仍然以标准流的方式对待它
+
+### 绝对定位(absolute)
+
+- **绝对定位**是元素以带有定位的父级元素来移动位置
+- **完全脱标** —— 完全不占位置
+- **父元素没有定位**，则元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位
+
+>**子绝父相** —— **子级**是**绝对**定位，**父级**要用**相对**定位。
+
+### 固定定位(fixed)
+
+- **完全脱标** —— 完全不占位置
+- 只认**浏览器的可视窗口** —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置
+  - 不随滚动条滚动
+
+## 扩展
+
+### 居中
+
+>**绝对定位/固定定位的盒子**不能通过设置 `margin: auto` 设置**水平居中**。
+
+1. `left: 50%;`：让**盒子的左侧**移动到**父级元素的水平中心位置**；
+2. `margin-left: -100px;`：让盒子**向左**移动**自身宽度的一半**。
+
+### 堆叠顺序（z-index）
+