相對定位和絕對定位，不改變元素的大小形狀，只改變元素的位置。
相對定位和絕對定位是通過position屬性來控制的，position屬性的值為下面幾種：
| 值 | 描述 |
| absolute | 使元素絕對定位，相對於static定位以外的最近的一個祖先元素進行定位。 元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。 |
| relative | 使元素相對定位，相對於自己的正常位置進行定位。 |
| fixed | 使元素絕對定位，相對於瀏覽器窗口進行定位。 元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。 |
| static | 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
注：對於html的標准流(文檔流)和瀏覽器怎么渲染各個DOM元素等底層知識，我不怎么清楚，下面的理解方式不一定正確，僅供參考。
- 相對定位： position: relative
該元素仍會呆在原來的位置，只不過通過top left等以其初始位置未起點移動。
無論是否位移，相對定位的元素仍會在文檔流中占用初始的空間。因此這樣平移元素會導致它遮擋其他元素。
相對定位總結：
- 相對定位的元素的參考對象是自己，即自己原來的所在位置(自己原來左上角作為坐標系的原點)。
- 相對定位移動后，之前的位置依舊保留，其他元素並不會占用。
- 相對定位后，有可能導致元素重疊。
- 絕對定位：position: absolute
絕對定位會把元素拿出文件流，因此就不會再占用原來的空間。與此同時，文檔流中的其他元素會重新定位，仿佛絕對定位的那個元素從來沒有出現過一樣。因此元素可以覆蓋標准流中的元素，也可以通過z-index設置層疊次序，z-index值越大越靠上層。如果把頁面比作高樓，正常的元素都是在1層，絕對定位的元素在2層及以上（也可為負數），z-index越大所在層越高，越難被其他元素覆蓋。
元素定位后會生成一個塊級框，而不論它在正常流中生成何種框。
絕對定位的盒子脫離了常規文檔流，因此很難用他嗎構建視口寬度和內容長度變化而變化的自適應或者響應式布局
絕對定位的元素的位置相對於最近的已定位祖先元素，並且position不是static，而是absolute或者relative，如果有就按照父元素左上角作為參考點，如果沒有則再找祖父元素、曾祖父元素、高祖父元素，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊。
| 值 | 描述 |
|---|