定位流分類
相對定位->relative? ? ? ? ? 絕對定位->absolute? ? ? ? ? ? ? ? 固定定位->fixed? ? ? ? ? ? ? 靜態(tài)定位->static
相對定位? 就是相對于自己以前在標(biāo)準(zhǔn)流中的位置來移動
position:relative;
top/bottom:
left/right:
注意點(diǎn)：1.相對定位是 不 脫離標(biāo)準(zhǔn)流的继榆，還是會占用一份空間的
2相對定位.在同一個方向上的定位屬性只能使用一個
3.區(qū)分 塊級元素/行內(nèi)元素/行內(nèi)塊級元素
4.由于相對定位是不脫離標(biāo)準(zhǔn)流的，并且相對定位的元素會占用標(biāo)準(zhǔn)流中的位置勤众，所以當(dāng)給相對定位的元素設(shè)置margin/padding等屬性的時候會影響到標(biāo)準(zhǔn)流的布局------>意思就是當(dāng)給相對定位的元素添加margin/padding屬性的時候戈轿，是會先添加到定位之前的盒子，而不是定位之后的盒子店雅。
相對定位應(yīng)用場景? ? 1.用于對元素進(jìn)行微調(diào)? 2.配合后面學(xué)習(xí)的絕對定位來使用
絕對定位? 相對于body來定位
position:absolute;
top/bottom:
left/right:
注意點(diǎn)：1.絕對定位的元素是脫離標(biāo)準(zhǔn)流的
2.絕對定位的元素是不區(qū)分 塊級元素/行內(nèi)元素/行內(nèi)塊級元素
絕對定位參考點(diǎn)
1政基、規(guī)律
1).默認(rèn)所有絕對定位的元素，無論有沒有祖先元素闹啦，都會以body為參考點(diǎn)
2).如果一個絕對定位的元素有祖先元素沮明，并且祖先元素也是定位流(除了靜態(tài)定位)，那么這個絕對定位的元素就會以定位流的那個祖先元素作為參考點(diǎn)窍奋。
?????????? 2.1).只要是這個絕對定位元素的祖先元素都可以
?????????? 2.2). 指的定位流是指------->絕對定位/相對定位/固定定位
?????????? 2.3).定位流中只有靜態(tài)定位不行
3).如果一個絕對定位的元素有祖先元素荐健，并且祖先元素也是定位流,而且祖先元素中有多個元素都是定位流，那么這個絕對定位的元素會以離他最近的那個定位流的祖先元素為參考點(diǎn)
* 絕對定位注意點(diǎn)（面試可能會問道）：1.如果一個絕對定位的元素是以body作為參考點(diǎn)琳袄，那么其實(shí)是以網(wǎng)頁首屏的寬度和高度作為參考點(diǎn)江场，而不是以整個網(wǎng)頁的寬度和高度作為參考點(diǎn)
2、一個絕對定位的元素會忽略祖先元素的padding
絕對定位--子絕父相
子元素用絕對定位 父元素用相對定位
絕對定位--水平居中
position:absolute;
left:50%;
margin-left:負(fù)的(元素寬度的一半);
background-position: 水平方向 垂直方向;
子絕父相? ? 絕對定位不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素
有序列表? ol>li
固定定位
position:fixed;
top/bottom:
left/right:
固定定位和背景關(guān)聯(lián)方式很像窖逗。
背景定位可以讓背景圖片不隨著滾動條的滾蛋而滾動址否，而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動
注意點(diǎn)：1、固定定位的元素是脫離標(biāo)準(zhǔn)流的碎紊，不會占用標(biāo)準(zhǔn)流中的空間
2佑附、固定定位和絕對定位一樣不區(qū)分 行內(nèi)/塊級/行內(nèi)塊級
固定定位和絕對定位的區(qū)別：固定定位不會隨著滾動條的滾動而滾動樊诺；
固定定位應(yīng)用場景
????????? 導(dǎo)航欄 、廣告
z-index屬性
默認(rèn)情況下所有元素都有一個默認(rèn)的z-index屬性音同，取值是0词爬。
z-index屬性的作用是專門用于控制定位流的覆蓋關(guān)系
1、默認(rèn)情況下定位流的元素會蓋住標(biāo)準(zhǔn)流的元素
2权均、默認(rèn)情況下定位流元素后面編寫的會蓋住前面編寫的
3顿膨、如果定位流的元素設(shè)置了z-index屬性，那么誰的z-index屬性比較大叽赊，誰就是顯示在上面
注意點(diǎn)：1恋沃、從父現(xiàn)象
??? 1.1）如果兩個元素的父元素都沒有設(shè)置z-index屬性，那么誰的z-index屬性比較大誰就顯示在上面蛇尚。
???1.2）如果兩個元素的父元素都設(shè)置了z-index屬性芽唇，那么子元素的z-index屬性就會失效，也就是說誰的父元素的z-index屬性比較大誰就會顯示在上面
