標籤：
定位有三種，分別是相對定位 position:relative; 、絕對位置 position:absolute; 、固定定位 position:fixed;
相對定位相對定位，就是微調元素位置的，讓元素相對自己原來的位置，進行位置調整。也就是說，如果一個盒子想進行位置調整，那麼就要使用相對定位
不脫標，原來的位置還佔著，形影分離相對定位不脫標，真實位置是在原來位置，只不過影子出去了，可以到處飄。
相對定位用途相對定位有坑，所以一般不用於做“壓蓋”效果。頁面中，效果極小。就兩個作用：
1） 微調元素
2） 做絕對位置的參考，子絕父相
可以用left、right來描述盒子右、左的移動；可以用top、bottom來描述盒子的下、上的移動。
實現的方法：
方法1：position:relative;top:100px;left:200px;絕對位置
方法2：position:relative;bottom:-100px;right:-200px;
方法3：position:relative;top:100px;right:-200px;
方法4：position:relative;bottom:-100px;left:200px;
絕對位置比相對定位更靈活
絕對位置脫標絕對位置的盒子，是脫離標準文檔流的。所以，所有的標準文檔流的性質，絕對位置之後都不遵守了。絕對位置之後，標籤就不區分所謂的行內元素、區塊層級元素了，不需要display:block;就可以設定寬、高了。
參考點絕對位置的參考點，如果用top描述，那麼定位參考點就是頁面的左上方，而不是瀏覽器的左上方：
如果用bottom描述，那麼就是瀏覽器首屏視窗尺寸，對應的頁面的左下角：
以盒子為參考點
一個絕對位置的元素，如果父輩元素中出現了也定位了的元素，那麼將以父輩這個元素，為參考點。
要聽最近的已經定位的祖先元素的，不一定是父親，可能是爺爺：
<div class="box1"> → 相對定位 <div class="box2"> → 沒有定位 <p></p> → 絕對位置，將以box1為參考，因為box2沒有定位，box1就是最近的父輩元素 </div> </div> <div class="box1"> → 相對定位 <div class="box2"> → 相對定位 <p></p> → 絕對位置，將以box2為參考，因為box2是自己最近的父輩元素 </div> </div>
不一定是相對定位，任何定位，都可以作為參考點
<div> → 絕對位置 <p></p> → 絕對位置，將以div作為參考點。因為父親定位了。</div>
子絕父絕、子絕父相、子絕父固，都是可以給兒子定位的。但是，工程上子絕、父絕，沒有一個盒子在標準流裡面了，所以頁面就不穩固，沒有任何實戰用途。工程上，“子絕父相”有意義，父親沒有脫標，兒子脫標在父親的範圍裡面移動。
<div class=”box1”> → 絕對位置 <div class=”box2”> → 相對定位 <div class=”box3”> → 沒有定位 <p></p> → 絕對位置，以box2為參考定位。 </div> </div></div>
絕對位置的兒子，無視參考的那個盒子的padding。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; border: 10px solid red; padding: 100px; padding-top: 150px; position: relative; margin: 100px; } p{ width: 100px; height: 100px; background-color: orange; position: absolute; top: 40px; left: 40px; } </style></head><body> <div> 字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字 <p></p> </div></body></html>
絕對位置的盒子置中
絕對位置之後，所有標準流的規則，都不適用了。所以 margin:0 auto; 失效。絕對位置的盒子置中，只需 left:50%; margin-left: 負的寬度的一半。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 400px; height: 60px; background-color: green; position: absolute; left: 50%; margin-left: -200px; } </style></head><body> <div></div></body></html>固定定位
固定定位，就是相對瀏覽器視窗定位。頁面如何滾動，這個盒子顯示的位置不變，固定定位脫標。
z-index值表示誰壓著誰。數值大的壓蓋住數值小的。
1）只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕對位置、固定定位，都可以使用z-index值。而浮動的東西不能用。
2） z-index值沒有單位，就是一個正整數。預設的z-index值是0。
3） 如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在HTML後面，誰在上面能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。
4）父元素的z-index小了，子項目設定的z-index再大也沒用。
非原創，純粹學習筆記
css之定位
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
