relative 定位
相對定位元素的定位是相對其正常位置。就是原來的位置
下面是正常情況下高度81.91
設置相對定位后高度還是81.91 ，沒有變化，但是內容移到上面去了
移動相對定位元素，它原本所占的空間不會改變。
相對定位元素經常被用來作為絕對定位元素的容器塊。
absolute 定位
絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對於<html>:
就是說他的父元素樣式中必須有 position 這個定位修飾詞，否則是相對整個頁面來定位的
absolute 定位使元素的位置與文檔流無關，因此不占據空間。
absolute 定位的元素和其他元素重疊。
<!DOCTYPE html> <html> <head> <title> top he bottom </title> <style> body{ margin: 0; padding: 0; } .main{ width: 100%; height: 500px; background-color: black; position:relative; } .test{ position:absolute; background-color: red; width: 100%; height: 100px; top: auto; bottom: 20px; } h2.pos_top { position:relative; top:-50px; } </style> </head> <body> <div class="main"> dsdsdsdsd <div style="width: 100%; height: 100px; background-color: burlywood;"> dsdsd </div> <div class="test"> <div> <h2>這是一個沒有定位的標題</h2> <h2 class="pos_top">這個標題是根據其正常位置向上移動</h2> </div> </div> </div> </body> </html>
參考：https://www.runoob.com/css/css-positioning.html