定位（position）
通過定位可以將元素擺放到頁面的任意位置
使用position屬性來設置定位
可選值
- static 默認值，元素是靜止的沒有開啓定位
- relative 開啓元素的相對定位
- absolute 開啓元素的絕對定位
- fixed 開啓元素的固定定位
- sticky 開啓元素的粘滯定位
相對定位
當元素的position屬性值設置爲relative時則開啓了元素的相對定位
相對定位的特點：
- 元素開啓相對定位以後，如果不設置偏移量元素不會發生任何的變化
- 相對定位是參照於元素在文檔流中的位置進行定位的
- 相對定位會提升元素的層級
- 相對定位不會使元素脫離文檔流
- 相對定位不會改變元素的性質塊還是塊，行內還是行內
偏移量（offset）
當元素開啓了定位以後，可以通過偏移量來設置元素的位置
top
- 定位元素和定位位置上邊的距離
bottom
- 定位元素和定位位置下邊的距離
定位元素垂直方向的位置由top和bottom兩個屬性來控制,通常情況下我們只會使用其中一種
- top值越大，定位元素越向下移動
- bottom值越大，定位元素越向上移
- left 定位元素和定位位置的左側距離
- right 定位元素和定位位置的右側距離
- 定位元素水平方向的位置由left和right兩個屬性控制
通常情況下只會使用一個
- left越大元素越靠右
- right越大元素越靠左
絕對定位
當元素的position屬性值設置爲absolute時，則開啓了元素的絕對定位
絕對定位的特點：
- 開啓絕對定位後，如果不設置偏移量元素的位置不會發生變化
- 開啓絕對定位後，元素會從文檔流中脫離
- 絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開
- 絕對定位會使元素提升一個層級
- 絕對定位元素是相對於其包含塊進行定位的
包含塊( containing block )
正常情況下：
包含塊就是離當前元素最近的祖先塊元素
<div> <div></div> </div>
<div><span><em>hello</em></span></div>
絕對定位的包含塊:包含塊就是離它最近的開啓了定位的祖先塊元素，如果所有的祖先元素都沒有開啓定位則根元素就是它的包含塊html（根元素、初始包含塊）
固定定位
將元素的position屬性設置爲fixed則開啓了元素的固定定位, 固定定位也是一種絕對定位，所以固定定位的大部分特點都和絕對定位一樣,唯一不同的是固定定位永遠參照於瀏覽器的視口進行定位,固定定位的元素不會隨網頁的滾動條滾動。
粘滯定位
當元素的position屬性設置爲sticky時則開啓了元素的粘滯定位,粘滯定位和相對定位的特點基本一致，不同的是粘滯定位可以在元素到達某個位置時將其固定。
水平佈局
加了絕對定位之前
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 包含塊的內容區的寬度
加了絕對定位之後
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含塊的內容區的寬度
當我們開啓了絕對定位後，水平方向的佈局等式就需要添加left 和 right 兩個值，此時規則和之前一樣只是多添加了兩個值，當發生過度約束，如果9個值中沒有 auto 則自動調整right值以使等式滿足，如果有auto，則自動調整auto的值以使等式滿足。可設置auto的值：margin width left right， 因爲left 和 right的值默認是auto，所以如果不指定left和right，則等式不滿足時，會自動調整這兩個值，垂直方向佈局的等式的也必須要滿足：top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含塊的高度
層級
對於開啓了定位元素，可以通過z-index屬性來指定元素的層級， z-index需要一個整數作爲參數，值越大元素的層級越高，元素的層級越高越優先顯示，如果元素的層級一樣，則優先顯示靠下的元素，祖先的元素的層級再高也不會蓋住後代元素