CSS元素基本的定位屬性
在CSS中有三種基本定位機(jī)制：普通流从藤、浮動(dòng)流锉桑、定位流毕谴。
本篇文章呢就跟大家講一下定位流
定位所用到的CSS屬性是“position”攻人，position的定義是檢索或設(shè)置對(duì)象的定位方式进副。
在CSS樣式中position屬性是有多種屬性值的
position屬性值：
static屬性值：
它代表的意思是默認(rèn)值这揣，當(dāng)元素位置設(shè)置為 static 的元素會(huì)正常顯示，它始終會(huì)處于文檔流給予的位置（注意當(dāng)position屬性設(shè)置成position: static;時(shí)影斑，元素會(huì)忽略任何 top给赞、bottom、left或 right 聲明）
此時(shí)我們可以看到矫户，當(dāng)我給元素設(shè)置position: static;時(shí)元素的位置大小并未發(fā)生改變片迅。
relative屬性值：
它代表的意思是相對(duì)于默認(rèn)位置的相對(duì)定位，而默認(rèn)位置呢就是元素本身的位置皆辽，通過(guò)設(shè)置left柑蛇、top、right驱闷、bottom屬性的值可將其移至指定位置（此時(shí)元素就會(huì)相對(duì)于自己的開(kāi)始的位置發(fā)生的位置上的移動(dòng)耻台，relative屬性不會(huì)破壞正常的布局流，他會(huì)占據(jù)著自己原來(lái)所在的空間）
如圖中當(dāng)我們給黃色區(qū)域設(shè)置position: relative;時(shí)元素會(huì)根據(jù)我們?cè)O(shè)置的top值和left值對(duì)元素進(jìn)行移動(dòng)遗嗽。使其移動(dòng)到指定位置粘我，以達(dá)到我們想要的效果。
absolute屬性值：
它代表的意思是絕對(duì)定位，此屬性值是相對(duì)于父級(jí)元素的絕對(duì)定位征字，給元素設(shè)置position: absolute; 時(shí)都弹，元素會(huì)浮出、脫離布局流匙姜，它不占據(jù)空間畅厢，就是我們所說(shuō)的層。
當(dāng)我們未給元素設(shè)置absolute屬性值時(shí)元素還是正常顯示的
此時(shí)我們給元素加上absolute屬性值
元素則會(huì)脫離原有空間氮昧，獨(dú)立出來(lái)框杜，此時(shí)元素的位置會(huì)相對(duì)于最近的已定位父元素的位置進(jìn)行定位，這時(shí)我們可直接指定“l(fā)eft”袖肥、“top”咪辱、“right” 以及 “bottom”屬性給元素進(jìn)行定位。不過(guò)若父級(jí)元素都沒(méi)有定位椎组，定位元素則以html（根元素）進(jìn)行定位油狂。
如果我們想讓元素還是根據(jù)父元素進(jìn)行定位，我們只需要給父元素加上相對(duì)定位寸癌，即可使元素本身相對(duì)于父元素進(jìn)行絕對(duì)定位专筷，
若元素因?yàn)閳D層關(guān)系未顯示出來(lái)可設(shè)置元素層疊的順序z-index:value，使元素顯示蒸苇。
fixed屬性值：
它代表的意思是相對(duì)于瀏覽器的絕對(duì)定位磷蛹，是相對(duì)于瀏覽器窗口的指定坐標(biāo)進(jìn)行定位。此元素的位置可通過(guò) "left"溪烤、"top"味咳、"right" 以及"bottom" 屬性來(lái)規(guī)定元素所在位置。定位后不論窗口滾動(dòng)與否氛什，元素都會(huì)留在那個(gè)位置莺葫。
sticky屬性值：
它代表的意思是黏性定位匪凉， 在沒(méi)有到達(dá)指定位置的時(shí)候枪眉，是沒(méi)有定位效果的，到達(dá)了指定位置再层，就變成了固定模式贸铜。可以看做是`position:relative`和`position:fixed`的結(jié)合體聂受，當(dāng)元素在屏幕內(nèi)蒿秦，表現(xiàn)為relative，就要滾出顯示器屏幕的時(shí)候蛋济，表現(xiàn)為fixed棍鳖。
當(dāng)元素未達(dá)到固定位置時(shí)和正常塊狀元素沒(méi)有什么區(qū)別
可當(dāng)元素到達(dá)指定為，元素屬性就會(huì)準(zhǔn)變?yōu)閜osition:fixed，定位在屏幕上方渡处。
以上就是position屬性常用的屬性值了镜悉。
