1、為什麼需要定位？
某個元素可以自由的在乙個盒子內移動位置，並且壓住其他盒子
滾動視窗時，盒子固定在某個位置
2、應用
下拉列表、模態框、web應用程式的一些基本效果
3、本質
將元素徹底從文件流中移走。允許將元素放在螢幕的任意位 置，還可以將乙個元素放到另乙個元素的前面或者後面，彼此重疊。（按照定位的方式擺放盒子）
4、定位組成
定位=定位模式+邊偏移
- 邊偏移
定位盒子移動的最終效果
4個值：
top：頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom：底部偏移量，定義元素相對於其父元素下邊線的距離
left：左側偏移量，定義元素相對於其父元素左邊線的距離
right：右側偏移量，定義元素相對於其父元素右邊線的距離
"one">
"two">
3、absolute—絕對定位
特點：1）、相對於祖先元素移動
2）、如果沒有祖先元素或祖先元素沒有定位，以瀏覽器為準定位（document文件）
例子1：沒有父元素的情況/*沒有父元素的情況*/
例子2、有父元素但沒定位"father">
"son">
截圖：
3）、如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。
例1：有父元素有定位"father">
例2、父親無定位，爺爺有定位
"grandfather">
"father">
"son">
截圖：
4）、絕對定位不再占有原先位置
4、fixed—固定定位
應用：
1)、 固定於瀏覽器可視區的位置。主要使用場景：瀏覽器頁面滾動時元素的位置不會改變。
2）、建立模態框
特點：
1）、以瀏覽器的可視視窗為參照點移動元素。
跟父元素沒有任何關係
不隨滾動條滾動
2）、不再占有原先的位置
可以看成特殊的絕對定位
固定定位小技巧：固定在版心兩側位置
1）、讓固定定位盒子left：50%，走到瀏覽器可視區域一半位置
2）、讓固定定位盒子margin-left：版心寬度的一半距離，多走版心寬度的一半位置
例子：
"fixed">
"w">版心畫素800px
5、sticky—粘滯定位特點：
1）、以瀏覽器的可視視窗為參照點移動元素（固定定位特點）
2）、粘性定位占有原先的位置（相對定位特點）
3）、必須新增top、left、right、bottom其中乙個才有效
定位總結定位模式
是否脫標
移動位置
static靜態定位
否不能使用邊偏移
relative相對定位
否（占有位置）
相對於自身位置偏移
absolute絕對定位
是（不占有位置）
帶定位的父級
fixed固定定位
是（不占有位置）
瀏覽器可視區
補充
1、定位的疊放順序
使用定位布局時，可能會出現盒子重疊的情況。此時，可以使用z-index控制盒子前後次序（z軸）
語法：
1）、 value可以是正負數或0，預設是auto，數值越大，盒子越靠上
2）、屬性值相同，按照書寫順序，從上往下依次執行
3）、value後不能加單位
4）、只有定位的盒子才有此屬性
2、絕對定位的盒子居中演算法
加了定位的盒子不可以使用margin：0 auto；進行居中，但有以下方法：
1）、left：50%；---->盒子左側移動到父級元素的水平中心位置
margin-left：-value px;---->盒子向左移動自身寬度的一半
3、定位的特殊屬性
float：其他盒子會無視當前元素，從瀏覽器左上角開始布局，而盒子內的文字依舊會為浮動的元素讓出位置
絕對定位：其他盒子與盒子內的文字都會無視當前元素，從左上角開始布局
****************************************
宣告：不是真正意義上的原創，只是學習筆記，內容來自各大資料！
CSS定位布局
絕對定位 如果想為元素設定層模型中的絕對定位，需要設定position absolute 表示絕對定位 這條語句的作用將元素從文件流中拖出來，然後使用left right top bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即...
css 定位布局
文件流 文件流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列。塊元素佔一行，行內元素在一行之內從左到在排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置。關於定位 可以使用css的 position 屬性來設定元素的定位型別，position 設定項如下 1 relativ...
css 布局布局定位心得
1 區域性絕對定位。當我們在乙個預設定位方式的div內巢狀的div實用 絕對定位 absolute 的時候，它會脫離上乙個div的控制，要實現乙個巢狀div相對上乙個div的絕對定位，只需要給上乙個div的定位加上 相對定位 relative 屬性即可，一般不會影響父div的顯示效果。2 盡量使用 ...