一、為什麼需要定位
某個元素可以自由的在乙個盒子內移動位置，並且壓住其他盒子。
當滾動視窗時，某些模組是固定在螢幕中的某個位置。
以上兩個效果通過標準流和浮動都無法快速實現，此時需要定位來實現。
二、定位組成
定位：將盒子定在某一位置
定位 = 定位模式 + 邊偏移
（定位模式用於指定元素在文件中的定位方式，邊偏移則決定了該元素的最終位置）
2.1 定位模式
定位模式決定元素的定位方式，通過css的position屬性設定值語義
static
靜態定位
relative
相對定位
absolute
絕對定位
fixed
固定定位
2.2 邊偏移
邊偏移就是定位盒子移動到最終位置，有top、bottom、left、right四個屬性
邊偏移屬性
示例描述
toptop: 80px
頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom
bottom: 80x
底部偏移量，定義元素相對於其父元素下邊線的距離
left
left: 80px
左側偏移量，定義元素相對於其父元素左邊線的距離
right
right: 80px
右側偏移量，定義元素相對於其父元素右邊線的距離
三、靜態定位 static
靜態定位是元素的預設定位方式，無定位的意思。
語法：
選擇器
相對定位是元素在移動位置的時候，是相對於它原來的位置來說的。
語法：
選擇器
絕對定位是元素在移動位置的時候，相對於它祖先元素來說的。
語法：
選擇器
子級用絕對定位，父級用相對定位。
子級絕對位置，不占有位置，可以放到父盒子裡面的每乙個地方，不會影響到其它的兄弟盒子
父盒子需要加定位限制子盒子在父盒子內顯示
父盒子布局時，需要占有位置，因此父親只能是相對定位
七、固定定位
固定定位是元素固定於瀏覽器可視區的位置。主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變。
語法：
選擇器
固定定位不再占有原先的位置，也是脫標的
前端筆記20 CSS絕對定位
前面一篇部落格，我們提到了相對定位。除了相對定位，我們還有乙個絕對定位。下面分享我學習到的絕對定位。絕對定位使用的是position absolute 定位需要乙個參照物 根據誰來做這個定位的？查詢參照物順序 先找父級元素，如果有定位屬性 positon 就以這個元素作為參照物發生偏移。如果沒有找到...
CSS定位筆記
相對定位沒有脫離文件流 相對定位相對於自身的位置定位 相對定位提公升乙個層級 會遮擋低層級的元素 相對定位不會改變元素的性質 塊級元素還是塊級元素，內聯元素還是內聯元素 絕對定位會脫離文件流 絕對定位相對於離其最近開啟定位的祖先元素位置定位 如果祖先元素沒有開啟定位，則會相對於瀏覽器視窗定位 絕對定...
前端 CSS 浮動和定位
1.標準文件流 文件流指的是元素排版布局過程中，元素會預設自動從左往右，從上往下的流式排列方式。並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素 塊級元素 獨佔一行 h1 h6 p div 列表.行內元素 不獨佔一行 span a img strong.行內元素 可以被包含在 塊級元素...