关于position：relative,absolute,fixed和static

恶补了一下position的一些知识点，写下自己的理解，见谅。

首先，position是个啥？定位。就大家所知，position有4个值：relative,absolute,fixed和static。在没有设定的情况下，默认为static，所以在没有特殊要求的情况下，可以省略不写。所以就着重讲讲另外三个。

1.relative：

相对定位。（相对自己未设定position时的定位，只会改变自身的定位，不影响其他元素的定位），比如：

但将第20行代码改成<div class="relative"></div>之后显示出来的又是另一个样式（如下）：

可以看到，第二个相对于原来定位向左移了其父级元素的10%，至于为何没有向下移动10%，是因为此时其父级元素还没有高度。

还可以将代码改成如下，

，然后再看一下此时的效果，

此时的第二个div相对于它此时的父级元素（第一个div）向下向右都移动了10%。

由此可见，relative（相对定位）是相对于自己的原来的定位（这里用百分比的基数就是其父级元素，如果换成px就更简单了，直接是相对于自身原本的定位与某个方位有了一定px的间距，但是也不会影响其他元素的定位）

2.absolute

绝对定位。

先讲绝对定位有啥特点：相对于static定位以外的第一个父元素进行定位，利用"left"，"right","bottom","top"进行定位。也就是说，当设置了absolute时，如果浏览器向上找到了任意一个设定了position:relative/absolute/fixed的块，就相对于这个块进行偏移，如果没有，那就相对于浏览器进行偏移，如：

而且我们可以发现，找不到position设置的<p>和<div>重合的地方被<p>标签遮住了，由此可见，设置了absolute会浮在指定位置，并会遮住其页面下方的内容。如果有多个absolute，可以设置z-index。

3.fixed：相对于浏览器的定位。

该元素可以理解为一个被定死的定位，设置了position:fixed；的块不随着滚动条的拉动而变动位置。如：

最开始显示的位置

拉动滚动条显示的位置（可以发现没有变）

-------------------------------------------------------------手----动-----隔----离----------------------------------------------------------------------------