今天寫這篇學(xué)習(xí)筆記主要是為了記錄一下對(duì)我來(lái)說(shuō)有一點(diǎn)容易混淆和容易遺忘的css知識(shí)點(diǎn)，position。
根據(jù)css3參考手冊(cè)突雪，position有以下幾個(gè)屬性
position：static| relative | absolute | fixed |center|page|sticky
默認(rèn)值：static
適用于：除display屬性定義為table-column-group | table-column之外的所有元素
繼承性：無(wú)
動(dòng)畫性：否
計(jì)算值：指定值
媒體：視覺(jué)
取值：
static：
對(duì)象遵循常規(guī)流担敌。此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用。
relative：
對(duì)象遵循常規(guī)流蝇裤，并且參照自身在常規(guī)流中的位置通過(guò)top，right频鉴，bottom栓辜，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會(huì)影響常規(guī)流中的任何元素。
absolute：
對(duì)象脫離常規(guī)流垛孔，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素藕甩，如果沒(méi)有定位的祖先元素，則一直回溯到body元素周荐。盒子的偏移位置不影響常規(guī)流中的任何元素狭莱，其margin不與其他任何margin折疊。
fixed：
與absolute一致概作，但偏移定位是以窗口為參考贩毕。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)仆嗦。
center：
與absolute一致辉阶，但偏移定位是以定位祖先元素的中心點(diǎn)為參考。盒子在其包含容器垂直水平居中瘩扼。（CSS3）
page：
與absolute一致谆甜。元素在分頁(yè)媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊集绰，否則取決于每個(gè)absolute模式规辱。（CSS3）
sticky：
對(duì)象在常態(tài)時(shí)遵循常規(guī)流。它就像是relative和fixed的合體栽燕，當(dāng)在屏幕中時(shí)按常規(guī)流排版罕袋，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed改淑。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見(jiàn)到的吸附效果。（CSS3）
我也看到了很多網(wǎng)站上有這樣一個(gè)css效果浴讯。這兩個(gè)小圖標(biāo)（有些網(wǎng)站上是側(cè)邊欄朵夏，是不會(huì)）。因此榆纽，此時(shí)應(yīng)該使用position的fixed取值仰猖。
relative取值是相對(duì)于自己偏移。
absolute是相對(duì)于非static的父級(jí)元素偏移（父級(jí)元素的position值不能為static）奈籽。
fixed一般相對(duì)于視窗饥侵。
