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結構中下面的元素會蓋住上面的元素。
