CSS

我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？

要实现以上效果，标准流或浮动都无法快速实现，所以，我们脑海应该有三种布局机制的上下顺序：

标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子在最上层（天空）

定位也是用来布局的，它有两部分组成：定位模式 + 边偏移

简单说，我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

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

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

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

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

绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）。

刚才咱们说过，绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？ 定位口诀：子绝父相，子级是绝对定位，父级要用相对定位。

疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？ 观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。

分析：

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

上面我们说了，绝对定位是元素以带有定位的父级元素来移动位置，如果父元素没有定位，则以浏览器可视窗口为准定位。固定定位是绝对定位的一种特殊形式：固定定位只认浏览器可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置。

补充：定位的盒子层级是最高层的，我们只要保证当前的这个盒子是定位的就会压住标准流和浮动盒子。

父元素使用相对定位，左上和右下的两个子元素使用绝对定位。

左右两侧的广告图片固定在浏览器可视窗口的左右两侧，所以我们使用固定定位。

绝对定位、固定定位的盒子不能通过设置 margin: auto 设置水平居中，因为这是标准流的做法。

在使用绝对定位时要想实现水平居中，可以按照下图的方法：

上面我们说了，定位的盒子层级是最高的，定位的盒子会压住标准流和浮动盒子。但是当有多个盒子都是定位的时候，可能会出现盒子重叠的情况，加了定位的盒子，默认后来居上，后面的盒子会压住前面的盒子。

使用 z-index 层叠属性可以调整盒子的堆叠顺序，如下图所示：

z-index 的特性如下：

前面我们讲过，display 是显示模式，可以改变显示模式有以下方式：

所以：

父元素使用相对定位，左右箭头以及下面的指示条使用绝对定位，指示条里面的小li使用浮动。

一个完整的网页，有标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

标准流 可以让盒子上下排列或者左右排列的。

浮动 可以让多个块级元素一行显示或者左右对齐盒子，浮动的盒子就是按照顺序左右排列 。

定位 定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，但是每个盒子需要有 z-index 数值。