定位佈局應用
1.定位屬性說明
position屬性規定元素的定位類型。這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。
說明：檢索對象的定位方式
- 當position的值爲非static時，其層疊級別通過z-index屬性定義。
- 絕對定位的元素，在top，right，bottom，left屬性未設置時，會緊隨在其前面的兄弟元素之後，但在位置上不影響常規流中的任何元素；
2.定位屬性取值
- static： 對象遵循常規流。此時4個定位偏移屬性不會被應用。
- relative：對象遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。
- absolute： 對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin摺疊；
3.定位之固定定位
fixed定位是指元素的位置相對於瀏覽器窗口是固定位置，即使窗口是滾動的它也不會滾動，且fixed定位使元素的位置與文檔流無關，因此不佔據空間，且它會和其他元素髮生重疊
- position: fixed
- 參照物是瀏覽器的可視窗口
- 不設置寬高時，寬高是由內容決定的
- 固定定位一般用在網站的側邊欄、回到頂部的結構上
實例 - 搜索欄一般固定定位
京東官網首頁地址： https://www.jd.com/
3.定位之絕對定位
絕對定位的特點:
- position: absolute
- 脫離文檔流
- 在不設置參照物時，參照物是body
- 人爲設置參照物時，必須滿足兩個條件
- 這個參照物必須是絕對定位元素的父級元素
- 這個父級元素必須帶有定位屬性(相對、絕對、固定)
- 當絕對定位這個元素設置寬高爲100%，繼承的是參照物的寬高
- 當絕對定位這個元素不設置四個方向值時，這個絕對定位元素的前面有其他平級(同級)元素，默認會排在這個平級元素的後面
- 在不設置寬高時，寬高是由內容決定的
- 當絕對定位時，同時設置left/right/top/bottom值時，left和top值生效
參考物查找情況:
祖先元素沒有定位參考點
- 定位參照物先找最近的上一級祖先元素，上一級祖先元素沒有定位屬性，則繼續網上查找，直到找到body爲止；
祖先元素有定位的參考點
- 定位參照物先找最近的上一級祖先元素，上一級祖先元素有定位屬性，則上一級有定位屬性的祖先元素就是參照物
方法: 始終水平垂直居中
- 絕對定位，上和左50%,再利用margin反向移動寬高的一半
- 絕對定位，上和左50%,再利用translate反向移動寬高的一半
- 絕對定位，四個方向偏移量爲0，然後margin設置爲auto
1.絕對定位，上和左50%,再利用margin反向移動寬高的一半
.black{width: 500px;height: 500px;background: black;position: relative}
.red{width: 200px;height: 200px;background: red;position: absolute;top:50%;left:50%;margin: -100px 0 0 -100px;}
2.絕對定位，上和左50%,再利用translate反向移動寬高的一半
.black{width: 500px;height: 500px;background: black;position: relative}
.red{width: 200px;height: 200px;background: red;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)}
3.絕對定位，四個方向偏移量爲0，然後margin設置爲auto
.black{width: 500px;height: 500px;background: black;position: relative}
4.定位之相對定位
相對定位的特點:
- position: relative
- 不脫離文檔流
- 相對定位的層級要比其他元素層級大(會蓋在其他元素之上)
- 當發生位置改變時，原來的位置還被佔用着
- 參照物: 相對定位元素的定位是相對它自己的正常位置的定位
- 給絕對定位當參照物來用
- 當同時設置left和right值時，left值生效。同時設置top和bottom值時，top值生效
應用場景:
- 當自己改變位置時，又不影響其他元素，可以用相對定位
- 給絕對定位當參照物來用
- 配合z-index和top/bottom/left/right一起使用
5.定位元素的異同點
相同點:
- 1.都可以設置top/bottom/left/right 四個方位，如果同時設置top和bottom，不管值的大小，只聽top的，如果同時設置left 和 right，不管值的大小，只聽left的；
- 2.都可以設置z-index的屬性，用來改變層級，z-index的值越大，層級越靠上，反之越靠下； ’
注意: z-indx一定要和position一起使用，否則不起作用；區別:
- 是否脫離正常文檔流
- 絕對定位和固定定位: 會脫離正常的文檔流(平行漂浮於元素之上: 重疊)；
- 絕對定位是會隨着滾動條的滾動而滾動
- 固定定位是固定不動，不會隨着滾動條的滾動而滾動
- 相對定位: 不會脫離正常的文檔流；
參照物
- 絕對定位 : 查找機制： 先找第一層的父元素，如果沒有則繼續往上查找，直接找到整個瀏覽器窗口爲止，如果上級父元素有定位的參照物，則停止查找；
- 固定定位 ： 整個瀏覽器的窗口
- 相對定位 : 它自己原來本身的位置
6.定位偏移量詳解
- top：上偏移量
- bottom：下偏移量
- left：左偏移量
- righ：右偏移量
6.z-index屬性詳解
z-index 檢索或設置對象的層疊順序：
- z-index用於確定元素在當前層疊上下文中的層疊級別，並確定該元素是否創建新的局部層疊上下文。
- 每個元素層疊順序由所屬的層疊上下文和元素本身的層疊級別決定（每個元素僅屬於一個層疊上下文）。
- 同一個層疊上下文中，層疊級別大的顯示在上面，反之顯示在下面。
- 同一個層疊上下文中，層疊級別相同的兩個元素，依據它們在HTML文檔流中的順序，寫在後面的將會覆蓋前面的。
- 不同層疊上下文中，元素的顯示順序依據祖先的層疊級別來決定，與自身的層疊級別無關。
- 當z-index未定義或者值爲auto時，在IE6,7下會創建新的局部層疊上下文，而在高級瀏覽器中，按照規範不產生新的局部層疊上下文
層疊準則：
- 誰大誰上：當具有明顯的層疊水平標識的時候，如生效的z-index屬性值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個；
- 後來居上：當元素的層疊水平一致，層疊順序相同的時候，在DOM流中處於後面的元素會覆蓋前面的元素；