關於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；的塊不隨着滾動條的拉動而變動位置。如：

最開始顯示的位置

拉動滾動條顯示的位置（可以發現沒有變）

-------------------------------------------------------------手----動-----隔----離----------------------------------------------------------------------------