比較常用而且會引起初學者迷惑的是absolute和relative，它倆有什麼分別呢？
一、先來看看W3C給的概念
absolute：產生絕對位置的元素，相對於 static 定位以外的第一個父元素進行定位。
relative：產生相對定位的元素，相對於其正常位置進行定位。
兩者最核心的區別在於：absolute不受父元素裡的其他元素影響，而relative會受到父元素裡的其他元素影響。
二、一張圖看懂absolute、relative的差別
代碼：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>html,body,div,p{margin: 0;padding: 0;}#baba {position: absolute;left: 50px;top:50px;width: 300px;height: 300px;background: blue;}#baba p{background:lightblue;}#erzi {position: absolute;left: 50px;top:50px;width: 200px;height: 200px;background: yellow;}</style></head><body id="body"><div id="baba"><p></p><div id="erzi"><p></p></div></div><script>var baba=document.getElementById("baba"),erzi=document.getElementById("erzi");baba.children[0].innerHTML="我是"+baba.id;erzi.children[0].innerHTML="我是"+erzi.id;</script></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
