1.定位元素的特征
說明：檢索對象的定位方式
- 當position的值為非static時汹粤，其層疊級別通過z-index屬性定義箩做。
- 絕對定位的元素虫腋，在top骄酗，right，bottom悦冀，left屬性未設置時趋翻，會緊隨在其前面的兄弟元素之后，但在位置上不影響常規(guī)流中的任何元素盒蟆。
2.position定位屬性值
- static： 對象遵循常規(guī)流踏烙。此時4個定位偏移屬性不會被應用。- relative：對象遵循常規(guī)流历等，并且參照自身在常規(guī)流中的
- 位置通過top讨惩，right，bottom寒屯，left這4個定位偏移屬性進行偏移時不會影響常規(guī)流中的任何元素荐捻。
-
absolute： 對象脫離常規(guī)流，此時偏移屬性參照的是離自身最近的定位祖先元素寡夹，如果沒有定位的祖先元素处面，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素菩掏，其margin不與其他任何margin折疊
3.png
3.position: static默認值
定位的默認值魂角，對象遵循常規(guī)流；
HTML元素的默認值智绸，即沒有定位野揪，元素出現在正常的流中；
靜態(tài)定位的元素不會受到 top, bottom, left, right影響传于；
4.position：fixed固定定位詳解
fixed定位是指元素的位置相對于瀏覽器窗口是固定位置囱挑，即使窗口是滾動的它也不會滾動，且fixed定位使元素的位置與文檔流無關沼溜，因此不占據空間平挑，且它會和其他元素發(fā)生重疊
- 參照物是瀏覽器的可視窗口
- 不設置寬高時，寬高是由內容決定的
- 固定定位一般用在網站的側邊欄、回到頂部的結構上
5.position：relative相對定位詳解
- 不脫離文檔流
- 相對定位的層級要比其他元素層級大(會蓋在其他元素之上)
- 當發(fā)生位置改變時通熄，原來的位置還被占用著
- 參照物: 相對定位元素的定位是相對它自己的正常位置的定位
- 給絕對定位當參照物來用
- 當同時設置left和right值時唆涝，left值生效。同時設置top和bottom值時唇辨，top值生效
以下兩點是相對定位常用的情況：
- 當自己改變位置時廊酣，又不影響其他元素，可以用相對定位給絕對定位當參照物來用
6.position：absolute絕對定位詳解
- 脫離文檔流
- 在不設置參照物時赏枚，參照物是body
- 人為設置參照物時亡驰，必須滿足兩個條件
- 這個參照物必須是絕對定位元素的父級元素
- 這個父級元素必須帶有定位屬性(相對、絕對饿幅、固定)
- 當絕對定位這個元素設置寬高為100%凡辱，繼承的是參照物的寬高
- 當絕對定位這個元素不設置四個方向值時，這個絕對定位元素的前面有其他平級(同級)元素栗恩，默認會排在這個平級元素的后面
- 在不設置寬高時透乾，寬高是由內容決定的
- 當絕對定位時，同時設置left/right/top/bottom值時磕秤，left和top值生效
7.position：absolute實戰(zhàn)之元素始終水平垂直居中
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;}
<div class="black">
<div class="red"></div>
</div>
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%)}
<div class="black">
<div class="red"></div>
</div>
3.絕對定位市咆，四個方向偏移量為0汉操，然后margin設置為auto
.black{width: 500px;height: 500px;background: black;position: relative}
.red{width: 200px;height: 200px;background: red;position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
<div class="black">
<div class="red"></div>
</div>
8.position 定位的相同點和區(qū)別解析
相同點
1.都可以設置top/bottom/left/right 四個方位，如果同時設置top和bottom床绪，不管值的大小客情，只聽top的，如果同時設置left 和 right癞己，不管值的大小膀斋，只聽left的；
2.都可以設置z-index的屬性痹雅，用來改變層級仰担，z-index的值越大，層級越靠上绩社，反之越靠下摔蓝；
注意: z-index一定要和position一起使用;否則不起作用
區(qū)別
1.是否脫離正常文檔流
- 絕對定位和固定定位: 會脫離正常的文檔流(平行漂浮于元素之上: 重疊)；
- 絕對定位是會隨著滾動條的滾動而滾動
- 固定定位是固定不動愉耙，不會隨著滾動條的滾動而滾動
- 相對定位: 不會脫離正常的文檔流贮尉；
2.參照物
- 絕對定位 : 查找機制： 先找第一層的父元素，如果沒有則繼續(xù)往上查找朴沿，直接找到整個瀏覽器窗口為止猜谚，如果上級父元素有定位的參照物败砂，則停止查找；
- 固定定位 ： 整個瀏覽器的窗口
- 相對定位 : 它自己原來本身的位置
3.position:relative 在實際項目中
1.作為絕對定位的參照物
2.配合z-index和top/bottom/left/right一起使用
9.z-index屬性的詳解
z-index 檢索或設置對象的層疊順序：
- z-index用于確定元素在當前層疊上下文中的層疊級別魏铅，并確定該元素是否創(chuàng)建新的局部層疊上下文昌犹。
- 每個元素層疊順序由所屬的層疊上下文和元素本身的層疊級別決定（每個元素僅屬于一個層疊上下文）。
- 同一個層疊上下文中览芳，層疊級別大的顯示在上面斜姥，反之顯示在下面。
- 同一個層疊上下文中沧竟，層疊級別相同的兩個元素铸敏，依據它們在HTML文檔流中的順序，寫在后面的將會覆蓋前面的屯仗。
- 不同層疊上下文中搞坝，元素的顯示順序依據祖先的層疊級別來決定，與自身的層疊級別無關魁袜。
- 當z-index未定義或者值為auto時，在IE6,7下會創(chuàng)建新的局部層疊上下文敦第，而在高級瀏覽器中峰弹，按照規(guī)范不產生新的局部層疊上下文
層疊準則：
- 誰大誰上：當具有明顯的層疊水平標識的時候，如生效的z-index屬性值芜果，在同一個層疊上下文領域鞠呈，層疊水平值大的那一個覆蓋小的那一個；
- 后來居上：當元素的層疊水平一致右钾，層疊順序相同的時候蚁吝，在DOM流中處于后面的元素會覆蓋前面的元素；
