一、三種定位
使用position: ;進行定位設置
固定定位position: fixed;
相對於瀏覽器窗口定位，固定在頁面一個位置，無論頁面滾動條怎么滾動，始終位於窗口固定位置，脫離文本流
相對定位（大盒子使用）position: relative;
1.相對定位是指相對於原本文檔流中的位置定位，也就是對於原先的位置來移動
2.不會脫離文本流，就算移動了，原先位置也會占有
3.受頁面外邊距影響，可以這么理解，頁面大盒子有了外邊距，整體都會距離頁面邊框有一定距離，那么定義的東西也會保持這個距離，再去相對定位的時候就會根據之前已經偏移的位置在進行定位，所以說是有影響的。
絕對定位（大盒子里的小盒子使用）position: absolute;
1.相對於離他最近的已定位的父級進行定位 也就是父級元素中已經定位的元素，根據他的位置進行定位 position定義之后才算定位，如果一直沒有，則就根據瀏覽器窗口來進行定位
2.絕對定位是根據父級來進行定位的，即使找不到父級也是根據頁面邊框來進行定位，所以不受到頁面內外邊距影響。
代碼示例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>定位</title> 7 <style type="text/css"> 8 /**{margin: 0;padding: 0;}*/ 9 body{height: 10000px; } 10 div{width: 100px; 11 height: 100px;} 12 #guDing{ 13 background: lightblue; 14 position: fixed; 15 left: 500px; 16 top: 200px; 17 } 18 #xiangDui{ 19 background: red; 20 position: relative; 21 left: 100px; 22 top: 100px; 23 24 } 25 #jueDui{ 26 background: lightgreen; 27 position: absolute; 28 left: 100px; 29 top: 100px; 30 31 } 32 </style> 33 </head> 34 <body> 35 <div id="guDing"></div> 36 <div id="xiangDui"></div> 37 <div id="jueDui"></div> 38 </body> 39 </html>
二、浮動和定位區別
就拿百度頁面來說 ，最上邊那一欄，如果用了浮動，當屏幕放大的時候，兩個本應該重合的卻實現了錯位，當使用定位就不會出現這個問題。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>百度</title> 7 <style type="text/css"> 8 9 ul{ 10 width: 600px; 11 height: 30px; 12 background-color: lightblue; 13 margin: 0; 14 /*position: absolute; 15 left: 0px; 16 top: 0;*/ 17 display: inline-block; 18 float: left; 19 } 20 div{ 21 width: 120px; 22 height: 30px; 23 background-color: lightgreen; 24 /*position: absolute; 25 right: 0px; 26 top: 0px;*/ 27 display: inline-block; 28 float: right; 29 } 30 31 </style> 32 </head> 33 <body> 34 <ul></ul> 35 <div></div> 36 37 </body> 38 </html>