html中的定位

定位分为五种：relative（相对定位），absolute（绝对定位），fixed（混合定位），static（静态定位），inherit（继承定位）

static为默认定位样式，即与本身定位相同，多用于在改变了元素的定位后，利用static使其回到默认样式。

其余三个多用于和left，right，top，bottom搭配使用。

1.position：relative（相对定位）

什么是相对定位？即与原来的位置相对。

当我们设置relative时，元素本事并不发生变化，但此时元素的位置就是它的相对位置。
当改变left，right等属性时，是根据此时的位置进行变化的

tip：relative并不会脱离正常的文档流。
eg：

2.position: absolute(绝对定位)

absolute会脱离文档流。

为什么absolute会脱离文档流呢？

当我们不设置absolute时，会发现元素是占页面空间的，当我们设置了absolute属性后发现，元素虽然存在于页面中，但却不占用空间了。
就好像整个元素漂浮起来一般。

absolute与relative相似，但是absolute的定位点取决于元素本身，当元素在左上角时，坐标轴以右为x轴正方向，以下为y轴正方向。
同理，当元素在右上角时，坐标轴以左为x轴正方向，以下为y轴正方向

position：relative与absolute如何混合使用？

*relative必须存在于父级标签中，absolute必须存在于子集标签中。

当仅有absolute时，发现，元素块是相对于整个页面进行定位的。

然而，当父级元素添加了relative属性后，absolute便相对于此父级元素进行定位，也就是说，相对于此父级元素的左上角为坐标原点。
eg：

3.position:fixed(固定定位)

fixed与absolute相似，脱离文档流。

什么是fixed呢？

顾名思义，就是，它只通过left，right等属性进行移动，并不随着页面的大小而改变位置，也就是说不论页面的宽和长设置为多少，元素都依然在此位置上，不发生偏移。

eg：

那么absolute与fixed还有什么区别呢？

当我们给父级元素设置absolute属性，给子级元素设置fixed属性时，发现fixed属性并不跟随父级元素的absolute走，
也就是说，fixed是一个单一属性，并不随其父级元素的改变而改变。

4.position:inherit（继承定位）

什么是inherit呢？

顾名思义，就是，通过子级元素通过inherit继承父级元素的定位属性。
当父级元素设置了position的属性值时，子级元素可以通过inherit继承父级元素的属性值。
eg：


如图，我们可知，div2，也就是div1的子元素继承了div1的fixed定位属性。

5.z-index（优先级定位）

顾名思义，当我们在进行定位的时候，如果div1写在div2的上面，那么默认div2的层级要比div1高，也就是说，等宽等高的div2会覆盖在div1上面
此时，便引出来z-index的用处。

z-index有三个属性：auto（默认），number（数字），inherit（继承）

默认与继承不多做赘述。

主要说number

在html中，默认的层级为0，而z-index属性只有在有定位属性时才起作用。

以上面为例：当给div1一个z-index：1；，那么div1便会覆盖在div2上。

此时有一个例外，

此时我们可以看出，即便div3的z-index的值小于div2的z-index的值，但由于div3的父级元素，也就是div1的z-index的值大于div2，
因此，div3默认跟随自己的父级元素，因此，也会覆盖在div3的上面。