CSS(五)(定位)

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移 。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

（1）定位模式

定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

| 值 | 语义 |

| — | — |

| static | 静态定位 |

| relative | 相对定位 |

| absolute | 绝对定位 |

| fixed | 固定定位 |

（2）边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

| 边偏移属性 | 描述 |

| — | — |

| top | 顶端偏移量。定义元素相对于其父元素上边线的距离 |

| bottom | 底部偏移量。定义元素相对于其父元素下边线的距离 |

| left | 左侧偏移量。定义元素相对于其父元素左边线的距离 |

| right | 右侧偏移量。定义元素相对于其父元素右边线的距离 |

2.静态定位 static

---

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器 { position: static; }

• 静态定位按照标准流特性摆放位置，它没有边偏移

• 静态定位在布局时很少用到

3.相对定位 relative

---

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）

语法：

选择器{position：relative;}

相对定位的特点：

1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

因此，相对定位并没有脱标。

4.绝对定位 absolute

---

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。

语法：

选择器{position：absolute；}

绝对定位的特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。

2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3. 绝对定位不再占有原先的位置。（脱标）

所以绝对定位是脱离标准流的。

5.子绝父相的由来

---

① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

② 父盒子需要加定位限制子盒子在父盒子内显示。

③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。 这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

6. 固定定位 fixed

---

语法：

选择器{position：fixed；}

固定定位的特点：

1. 以浏览器的可视窗口为参照点移动元素。

2. 跟父元素没有任何关系,不随滚动条滚动。

3. 固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

小算法：

• 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。

• 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

固定定位小技巧： 固定在版心右侧位置。

7.定位总结

---

| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |

| — | — | — | — |

| static 静态定位 | 否 | 不能使用边偏移 | 很少 |

| relative 相对定位 | 否 | (占有位置) 相对于自身位置移动 | 常用 |

| absolute绝对定位 | 是 | （不占有位置） 带有定位的父级 | 常用 |

| fixed固定定位 | 是 | （不占有位置） 浏览器可视区 | 常用 |

| sticky粘性定位 | 否 | (占有位置) 浏览器可视区 | 当前阶段少 |

8.定位叠放次序 z-index

---

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。