阿基米德說“給我一個支點,我能翹起整個地球”，在HTML頁面中，給你一個坐標，可以把任何一個元素定位目標點，這就是定位！CSS有三種基本的定位機制：相對定位、絕對定位、固定定位，決定定位的position屬性的值有static預設標準流，當然這個就不用多說了；fixed固定定位，releative相... ...
阿基米德說“給我一個支點,我能翹起整個地球”，在HTML頁面中，給你一個坐標，可以把任何一個元素定位目標點，這就是定位！CSS有三種基本的定位機制：相對定位、絕對定位、固定定位，決定定位的position屬性的值有static預設標準流，當然這個就不用多說了；fixed固定定位，releative相對定位，absoulte絕對定位，結論如下:1.定位配合坐標點top bottom left right;2.相對定位相對於自身位置自增或者自減，坐標起點是原來所在位置;3.absolute絕對定位找最近的position屬性，沒有的話，就找父集進行定位。代碼展示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>position屬性值4缺一帶你瞭解相對還是絕對抑或是固定定位</title> 7 <style type="text/css"> 8 div{ 9 width: 200px; 10 height: 200px; 11 color: #fff; 12 } 13 .box1{ 14 width: 120px; 15 height: 50px; 16 line-height: 50px; 17 background-color: darkviolet; 18 position: fixed; 19 bottom: 100px; 20 right: 50px; 21 text-align: center; 22 border-radius: 5px; 23 } 24 /* 固定定位,常見頁面線上客服固定在某一個位置，怎麼解決？ */ 25 /*配合定位 top bottom left right坐標點分2組 top bottom / left right*/ 26 /*bottom: 100px; 底部往上100px*/ 27 .box2{ 28 background-color: red; 29 /* position: relative; 30 left:200px; 31 top:30px; */ 32 } 33 /*相對定位*//*相對於自身位置自增或者自減，坐標起點是原來所在位置*/ 34 /*向元素的原始上側位置增加30像素。*/ 35 /*向元素的原始左側位置增加200像素。*/ 36 .box3{ 37 background-color: chartreuse; 38 /* position: absolute; 39 top: 100px; 40 left: 100px; */ 41 } 42 /*發現box3添加絕對定位後位置飄到box2上面去了,box4上來了，box3的參考坐標點是body*/ 43 44 .box4{ 45 background-color: crimson; 46 } 47 .box5{ 48 /* bottom: 300px; 49 right: 400px; 50 position: fixed; */ 51 margin:0 auto; 52 position: relative; 53 background-color: darkmagenta; 54 } 55 .box6{ 56 width: 100px; 57 height: 100px; 58 background-color:blue; 59 position: absolute; 60 top: 100px; 61 left: 100px; 62 } 63 /*結論absolute絕對定位找最近的position屬性，沒有的話，就找父集*/ 64 </style> 65 </head> 66 <body> 67 <!--情景一絕對定位在外面--> 68 <div class="box1">hello!固定定位</div> 69 <!-- br*100 回車快捷鍵 展示如下--> 70 <div class="box2"></div> 71 <div class="box3"></div> 72 <div class="box4"></div> 73 74 <!--情景二絕對定位在裡面--> 75 <div class="box5"> 76 <div class="box6">絕對定位</div> 77 </div> 78 </body> 79 </html>
