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=" 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