一汤功、定位
position屬性用于指定一個(gè)元素在文檔中的定位方式坯辩。top right bottom left決定該元素的最終位置。
static 指定元素使用正常的布局行為囚巴，即元素在文檔流當(dāng)前的布局位置您炉。注意：此時(shí)top right bottom left z-index屬性無效
relative 元素先放置在未添加定位時(shí)的位置柒爵，在不改變頁面布局的前提下調(diào)整元素位置。（不太理解）
absolute 不為元素預(yù)留空間赚爵，通過指定元素相對于最近的非static定位祖先元素的便宜棉胀，來確定元素的位置法瑟。* （實(shí)際上，經(jīng)常和relative搭配使用） *
fixed 不為元素預(yù)留空間唁奢，而是通過指定元素相對于屏幕視口的位置來指定元素位置霎挟。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變。（比如頂部導(dǎo)航條的實(shí)現(xiàn)）
-
sticky 可以被認(rèn)為是相對定位和固定定位的混合麻掸。元素在跨越特定閥值前為相對定位酥夭，之后為固定定位。必須制定top right bottom left其中之一脊奋，才能生效采郎。否則和相對定位一樣。比如MDN的示例：sticky.gif
筆記
１．將導(dǎo)航條使用fixed定位在頂部
結(jié)果發(fā)現(xiàn)狂魔，使用了定位的元素縮到左邊去了。解決方法：設(shè)置寬度100%（不過這也是bug的來源）淫痰。又產(chǎn)生新的問題最楷，太寬了！待错，如圖１：
圖１.png
實(shí)際上籽孙，由于剛才的寬度設(shè)置，這時(shí)候?qū)Ш綏l的寬度＋padding已經(jīng)大于頁面寬度火俄。解決方法：
第一步：取消導(dǎo)航條的左右padding犯建，如圖２：
圖２.png
效果也并不好。
第二步：添加一個(gè)div瓜客，包裹導(dǎo)航條（同時(shí)要注意清除浮動(dòng)）适瓦，給這個(gè)div設(shè)置左右padding就可以。效果如圖３：
圖３.png
２．其他
- line-height: 有潛在的bug谱仪，在比較低的時(shí)候能用
３．svg
.userCard svg {
width: 30px;
height: 30px;
fill: white;
/* 會(huì)偏上 玻熙，添加下面代碼*/
vertical-align: top;
}
