html中position定位

html中position有三个值：relative、absolute、fixed。

首先说position:relative，相对定位，指的是元素本身定位。开启元素相对定位之后，

1.元素不会脱离文档流；

2.可以给元素设置top、bottom、left、right值；

3.可以给元素提升一个层级；

4.设置了相对定位元素，原来是内联元素现在还是内联元素，原来是块状元素，现在还是块状元素。

例：有3个块状元素，想要将box2移到box3的右边，通常可以给box2设置margin-top、margin-left值实现，具体如下：

但是我们 发现给box2设置margin-top、margin-left值后，box2并没有到box3的右边，box3同时也下移了100px。

此时我们可以通过给box2设置position:relative，并设置left、right、top、bottom等偏移值来实现。

如图：

但是如果box2在水平方向上是偏移了50px，则box2会将box3遮住一部分，而不是box3会将box2遮住一部分，因为box2设置了position:relative后，层级提升了一个等级。

具体如图：

给元素添加了position:relative后，块状元素还是块状元素，内联元素还是内联元素。

然后说position:absolute绝对定位，

1.设置position:absolute的元素会脱离文档流

2.会提升一个层级，遮住其他元素

3.设置top、bottom、left、right时偏移量是相对于最近的一个父元素偏移

4.会将内联元素变成块状元素。

示例：

有box1、box2、box3，高度一样，宽度不一样，给宽度最小的box1设置position：absolute后，他会脱离文档流，并且会提升一个层级，盖住box2的一部分。

如果给具有position：absolute的元素设置偏移量的话，会发现他的偏移和position：relative的偏移有所不同，它是相对于他最近的父元素进行偏移。如图：

如果给他的父元素body设置一个margin：0，padding：0后，元素偏移就正常了。

如图：

设置了position：absolute的元素，内联元素会变块状元素。

如图：

position：fixed，相对于浏览器窗口固定定位。

无论怎么滚动滚动条，设置了position：fixed的元素总是在距离浏览器窗口固定位置。

如图：

设置了position:absolute和position:relative的元素都会进行层次的提升，如果3个元素都设置了position定位，层级关系是怎么样的呢？

示例如图：

如果3个都设置了position定位，box2会盖住box1，box3会盖住box2，即html结构中下面的元素会盖住上面的元素。