1static(默認)
當你沒有為一個元素(例如div)指定定位方式時，默認為static，也就是按照文檔的流式(flow)定位，將元素放到一個合適的地方。所以在不同的分辨率下，采用流式定位能很好的自適應，取得相對較好的布局效果。
一般來說，我們不需要指明當前元素的定位方式是static——因為這是默認的定位方式。除非你想覆蓋從父元素繼承來的定位系統。
left,top屬性對static沒有效果，static是靠margin這些定位的。
2.固定定位 fixed 相對於瀏覽器定位
3.相對定位 relative 不會脫離原本的文檔流 相對於選本的位置 會占用原來的空間
4.絕對定位 absolute相對於離他最近的已定位父級進行定位
先用相對定位寫一個盒子 內容用絕對定位
使用absolute定位后，定位元素是脫離文檔流的，這時候父級會檢測不到定位元素的寬高
文檔流：文檔流是文檔中可顯示對象在排列時所占用的位置。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> body{ height: 10000px; } div{ width: 100px; height: 100px; } #guDing{ background: lightblue; position: fixed; left: 500px; top: 200px; } #xiangDui{ background: lightcoral; position: relative; left: 100px; top: 100px; } #jueDui{ background: lightgreen; position: absolute; left: 100px; top: 100px; } </style> </head> <body> <div id="guDing"></div> <div id="xiangDui"></div> <div id="jueDui"></div> </html>
運行此段代碼會發現 第2個和第3個盒子只有定位方式不同 但是兩個盒子會有8個像素的錯位
8個像素的差值的原因是
jueDui定位的盒子與ziangDui定位的盒子不完全重合，他倆之間有8個像素的錯開的原因因為
第2個盒子是相對定位 默認的位置是再瀏覽器的左上角 屬於body里的相當於body定位 但是再body中會有默認的8個像素
第三個盒子絕對定位相對於離他最近的已定位父級進行定位
並且絕對定位最近的父級是body 但是body沒有定位所以再往上移動一個父級 body的上一個父級為html 所以第3個盒子的定位是瀏覽器的界面
html沒有8個像素的maigin body中有8個像素的margin
此圖為body的conSole
此圖為html的conSole
定位的重點是他們相對與誰定位 再什么時候什么定位合適 和組合運用時的順序
混合定位
如果對一個父元素設置relative，而對它的一個子元素設置absolute
float(浮動)
對於浮動，需要了解的是：
浮動會將元素從文檔流中刪除，他的空間會被其它元素補上。
浮動的參數物是父元素，是在父元素這個容器中飄。
為了清除浮動造成的對浮動元素之后元素的影響，我們在浮動元素之后加一個div，並將這個div的clear設置為both。
如果兩個元素都設置了浮動，則兩個元素並不會重疊，第一個元素占據一定空間，第二個元素緊跟其后。如果不想讓第二個元素緊跟其后，可以對第二個浮動的元素使用clear。