以下情況用標準流或者浮動不能實現：
某個元素可以自由的在乙個盒子內移動位置，並且壓住其它盒子。
當我們滾動視窗的時候，盒子是固定在螢幕的某個位置的。
所以：浮動可以讓多個塊級盒子一行沒有縫隙排列顯示，經常用於橫向排列盒子。
定位則是可以讓盒子自由的在某個盒子內移動位置或者固定螢幕中的某個位置，並且可以壓住其它盒子。
定位：將盒子定在某乙個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子。
定位 = 定位模式 + 邊偏移。
定位模式用於指定乙個元素在文件中的定位方式。邊偏移則決定了該元素的最終位置。
定位模式決定元素的定位方式，他通過css的position屬性來設定，其值可以分為四個：值語義
static
靜態定位
relative
相對定位
absolute
絕對定位
fixed
固定定位
邊偏移就是定位的盒子移動到最終位置，有 top、bottom、left 和 right 4個屬性。
邊偏移屬性
示例描述
toptop: 80px
頂端偏移量，定義元素相對於其父元素上邊線的距離。
bottom
bottom : 80px
底部偏移量，定義元素相對於其父元素下邊線的距離。
left
left: 80px
左側偏移量，定義元素相對於其父元素左邊線的距離。
right
right: 80px
右側偏移量，定義元素相對於其父元素右邊線的距離。
靜態定位是元素的預設定位方式，無定位的意思。
語法：
選擇器語法：
選擇器它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。
原來在標準流的位置繼續占有，後面的盒子仍然以標準流的方式對待它。（不脫標，繼續保留原來位置）
絕對定位是元素在移動位置的時候，是相對於他祖先元素來說的。
語法：
選擇器如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準定位（document文件）。
如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。
絕對定位不再占有原先的位置。（脫標）
子絕父相是定位中最常用的一種方式，這句話的意思是：子級是絕對定位的話，父級要用相對定位。
① 子級絕對定位，不會占有位置，可以放到父盒子裡面的任何乙個地方，不會影響其他的兄弟盒子。
② 父盒子需要加定位限制盒子在父盒子內顯示。
③ 父盒子布局時，需要占有位置，因此父親只能是相對定位。
這就是子絕父相的由來，所以相對定位經常用來作為絕對定位的父級。
總結：因為父級需要占有位置，因此是相對定位，子盒子不需要占有位置，則是絕對定位
固定定位是元素固定於瀏覽器可視區的位置。主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變。
語法：
選擇器以瀏覽器的可視視窗為參照點移動元素。
– 跟父元素沒有任何關係
– 不隨滾動條滾動z
固定定位不再占有原來的位置。
– 固定定位也是脫標的，其實固定定位也可以看作是一種特殊的絕對定位。
固定定位小技巧：固定在版心右側位置。
小演算法：
讓固定定位的盒子 left：50%，走到瀏覽器可視區（也可以看做版心）的一半位置。
讓固定定位的盒子 margin-left：版心寬度的一半距離，多走 版心寬度的一半位置。
粘性定位可以被認為是相對定位和絕對定位的混合。
語法：
選擇器以瀏覽器的可視視窗為參照點移動元素（固定定位的特點）
粘性定位占有原先的位置（相對定位的特點）
必須新增 top、left、right、bottom 其中乙個才有效
跟頁面滾動搭配使用，相容性較差，ie不支援。
定位模式
是否脫標
移動位置
是否常用
static 靜態定位
否不能使用邊偏移
很少relative 相對定位否（占有位置）
相對於自身位置移動
常用absolute 絕對定位是（不占有位置）
帶有定位的父級
常用fixed 固定定位是（不占有位置）
瀏覽器可視區
常用sticky 粘性定位
否瀏覽器可視區
當前階段少
在使用定位布局時，可能會出現盒子重疊的情況。此時，可以使用z-index來控制盒子的前後次序（z軸）
語法：
選擇器加了絕對定位的盒子不能通過 margin：0 auto；水平居中，但是可以通過以下計算方法實現水平和垂直居中。
水平居中演算法：（垂直居中同理）
① left：50%；讓盒子的左側移動到父級元素的水平中心位置。
② margin-left：-100px； 讓盒子向左移動自身寬度的一半。
定位的特殊特性
絕對定位和固定定位也和浮動類似。
行內元素新增絕對或固定定位，可以直接設定高度和寬度。
塊級元素新增絕對或固定定位，如果不給寬度或者高度，預設大小是內容的大小。
脫標的盒子不會觸發外邊距塌陷
浮動元素、絕對定位（固定定位）元素都不會出發外邊距合併的問題。
絕對定位（固定定位）會完全壓住盒子
浮動元素不同，只會壓住它下面標準流的盒子，但是不會壓住下面標準流盒子裡面的文字（）
但是絕對定位（固定定位）會壓住下面標準流所有的內容。
浮動之所以不會壓住文字，是因為浮動產生的目的最初是為了做文字環繞效果的。文字圍繞浮動元素。
注意
如果乙個盒子既有left屬性也有right屬性，則缺省會執行 left 屬性 同理 top bottom 會執行 top。
position定位知識點彙總
如果想將某個元素定位到頁面某處的話，此元素position設定absolute，外面盒子position設定relative。position absolute 初始預設絕對定位於瀏覽器，如果想絕對定位於外面某盒子元素，則給改盒子元素新增position relative 屬性。最有方案 提問 為什...
CSS面試知識點
偶然發現，公司裡多了很多新面孔。在電梯裡，總能遇到面容似曾相識卻叫不出名字的同事，才後知後覺，貌似又進入了求職高峰期。曾經一起奮戰的同事，如今又在另外一片天空追尋自己的夢想，祝福他們，希望所有的程式設計師都能幸福。回想起去年這個時候，也是在求職的路上磕磕絆絆。去年很不順，迷信的說法也許是本命年犯太歲...
整理 CSS知識點
1 css注釋 這是個注釋 2 選擇器 id 選擇器 para1 class 選擇器 center p.center class為center的所有p元素 3 css建立 外部樣式表 內部樣式表 內聯樣式 this is a paragraph.層疊次序 當同乙個 html 元素被不止乙個樣式定義時...