CSS的position總是屬性很容易讓人弄混~
為了仔細(xì)區(qū)別它們搁胆，所以今天總結(jié)一下CSS的position屬性~
下面是總結(jié)內(nèi)容~
有疏漏、錯誤之處敬請指出抑党！o(^▽^)o
一罪治、簡介
定義：position屬性規(guī)定元素的定位類型鹃答。
說明：這個屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對定位或固定元素會生成一個塊級框螃宙，而不論該元素本身是什么類型蛮瞄。相對定位元素會相對于它在正常流中的默認(rèn)位置偏移。
默認(rèn)值：static
繼承性：no
形式語法：static | relative | absolute | sticky | fixed
JavaScript語法：object.style.position = "absolute"
瀏覽器支持：所有主流瀏覽器都支持position屬性污呼。但：任何版本的Internet Explorer(包括IE8)都不支持屬性值“inhert”裕坊。
二、取值
| 值 | 描述 |
|---|---|
| static | 默認(rèn)值燕酷，沒有定位籍凝。元素出現(xiàn)在正常的流中。（忽略top苗缩、right饵蒂、bottom、left和z-index屬性） |
| relative | 生成相對定位的元素酱讶，相對于其正常位置進(jìn)行定位退盯。 |
| absolute | 生成絕對定位的元素，相對于最近的非static父元素進(jìn)行定位泻肯。絕對定位的元素可以設(shè)置外邊距（margin）渊迁，且不會與其他他邊距合并。 |
| fixed | 生成絕對定位的元素灶挟，相對于瀏覽器窗口(viewport)進(jìn)行定位琉朽。 |
| sticky | 盒位置根據(jù)正常流計算，然后相當(dāng)于該元素在流中的flow root(BFC)和containing block（最近的塊級元素）定位稚铣。 |
注：
文檔流：將窗體自上而下分成一行行箱叁，并在每行中按從左至右的順序排放元素，即為文檔流惕医。
元素脫離文檔流的情況：浮動耕漱、絕對定位（absolute、fixed）抬伺。
三螟够、 詳解
我們以一個初始未定位示例為參照，其他屬性值將和它進(jìn)行比較峡钓。
[定位參照示例]（https://jsfiddle.net/hysunny/3gwbeu3v/）
1. static
默認(rèn)值齐鲤。沒有定位，元素出現(xiàn)在正常流中（忽略top椒楣，bottom，left牡肉，right或者z-index聲明）
解釋：position設(shè)置為static或不設(shè)定position屬性時捧灰，元素遵循正常的文檔流，對象占用文檔空間，該定位方式下毛俏，top炭庙、right、left煌寇、bottom焕蹄、z-index屬性是無效的。
示例：[static定位]（https://jsfiddle.net/hysunny/zj2ogz8m/）
通過上例阀溶，可以看出position屬性設(shè)置為static和不設(shè)置其實是一樣的~
所以腻脏，通常此屬性值可以不設(shè)置，除非要覆蓋之前的定義银锻。下面舉個栗子：
A頁面
#div-1{
position:absolute永品；
}
B頁面
#div-1{
position:absolute；
}
頁面B中`position:static;是為了覆蓋頁面A中position的定義击纬。
2. relative
生成相對定位的元素鼎姐，相對于其正常位置進(jìn)行定位。
解釋：
(1）position設(shè)置為relative時更振，top炕桨、right、left肯腕、bottom等屬性有效献宫，相對其正常位置移。
(2）position設(shè)置為relative時乎芳，元素遵照正常的文檔流遵蚜，占據(jù)文檔空間，但是占據(jù)的文檔空間不會隨top奈惑、right吭净、left、bottom的偏移而發(fā)生變動肴甸，也就是說寂殉，它后面的元素是依據(jù)前一個元素正常位置（即未設(shè)置top、right原在、left友扰、bottom屬性之前）進(jìn)行的定位。
(3）position設(shè)置為relative時庶柿，如果沒有進(jìn)行任何的top村怪、right、left浮庐、bottom設(shè)置甚负，元素不會進(jìn)行任何位置的改變。
示例：[relative定位-1]（https://jsfiddle.net/hysunny/ae8s2cm4/）
虛線是初始的位置空間。
由圖我們可以看出梭域，相對定位是相對元素原本在文檔流中的位置而進(jìn)行的偏移斑举。并且它后面的元素——second是依據(jù)虛線位置，也就是元素原本在文檔流中的位置而進(jìn)行的定位病涨。
好了富玷，我們現(xiàn)在知道了top、right既穆、left赎懦、bottom等屬性不會改變relative定位的元素所占據(jù)的文檔空間。循衰，那么margin铲敛、padding會改變該元素占據(jù)的文檔空間嗎？我們來試一下：
css代碼中添加margin屬性：
示例：[relative定位-2]（https://jsfiddle.net/hysunny/vxc9ctqs/）
由圖可以看出会钝，我們將外邊距設(shè)置為20px伐蒋，second元素向下偏移40px，所以margin可以改變元素所占文檔空間迁酸！同理先鱼，padding也可改變元素所占文檔空間，這里不多做演示奸鬓。
3. absolute
生成絕對定位的元素焙畔，相對于非static定位的第一個父元素進(jìn)行定位。
解釋：position設(shè)置為absolute串远，元素會脫離文檔流宏多，整個元素不再占據(jù)文檔空間，就只能相對非static定位的第一個父元素進(jìn)行定位
(1）absolute在無父級是非static定位時以<html>標(biāo)簽作為原點(diǎn)定位澡罚，而relative和static方式在最外層時是以<body>標(biāo)簽作為原點(diǎn)定位伸但。<html>標(biāo)簽和<body>標(biāo)簽相差9px左右。
(2）position設(shè)置為absolute或fixed時留搔，必須指定left更胖、right、top隔显、bottom屬性中的至少一個却妨，否則left、right括眠、top彪标、bottom屬性會使用它們的默認(rèn)值auto，這將導(dǎo)致對象遵從正常的HTML布局規(guī)則掷豺，在前一個對象之后立即被呈遞捞烟，簡單講就是都變成relative账锹，會占用文檔空間，不會脫離文檔流坷襟。若多設(shè)，比如top和bottom一同存在的話生年，那么只有top生效婴程；left和right一同存在的話，那么只有l(wèi)eft生效抱婉。
(3）絕對（absolute）定位對象和相對（relative）定位對象在可視區(qū)域之外會導(dǎo)致滾動條出現(xiàn)档叔。而固定（fixed）定位對象放置在可視區(qū)域之外，滾動條不會出現(xiàn)蒸绩。
示例：
[absolute定位-1]（https://jsfiddle.net/hysunny/q325w0k6/）
由此例我們可以發(fā)現(xiàn)absolute相對html定位衙四，relative相對body定位。
下面我們再來看看對absolute定位的元素的除static外第一個父元素設(shè)置margin/padding患亿，看看會不會對文檔空間有影響传蹈。
在absolute定位中添加margin/padding屬性：
[absolute定位-2]（https://jsfiddle.net/hysunny/59xv1qmx/）
由上圖我們可以看出，父元素的margin會讓子元素的absolute定位跟著偏移步藕，而padding卻不會讓子元素發(fā)生偏移惦界。總結(jié)：absolute是根據(jù)父元素的border進(jìn)行的定位咙冗。
4.fixed
生成絕對定位的元素沾歪，相對于瀏覽器窗口進(jìn)行定位。
解釋： fixed定位雾消，又稱固定定位灾搏，它和absolute定位一樣，都脫離了文檔流立润，并且能夠根據(jù)top狂窑、right、left范删、bottom屬性進(jìn)行定位蕾域，但不同的是fixed是根據(jù)窗口為原點(diǎn)進(jìn)行偏移定位的，也就是說它不會根據(jù)滾動條的滾動而進(jìn)行偏移到旦。
示例：[fixed定位]（https://jsfiddle.net/hysunny/cubxLga9/）
5. sticky
粘性定位旨巷。CSS3新屬性。它的表現(xiàn)類似position:relative和position:fixed的合體添忘，在目標(biāo)區(qū)域在屏幕中可見時采呐，它的行為就像position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的表現(xiàn)就像position:fixed搁骑，它會固定在目標(biāo)位置斧吐。
目前position: sticky;的瀏覽器兼容性還比較差又固。
示例：[sticky定位]（https://jsfiddle.net/hysunny/rztoc45w/）
6. inherit
規(guī)定應(yīng)該從父元素繼承position屬性的值。
示例：[inherit定位]（https://jsfiddle.net/hysunny/4uLp2ybv/）
運(yùn)行煤率，我們發(fā)現(xiàn)second繼承了first的position屬性：fixed仰冠。同時超出可視區(qū)域之外時不會出現(xiàn)滾動條。
總結(jié)
1. 相對定位的屬性：
(1）如果設(shè)定了top蝶糯、right洋只、left、bottom等屬性昼捍，并且父元素沒有設(shè)定position屬性识虚，元素以其父元素的左上角為原點(diǎn)進(jìn)行定位。
[示例]（https://jsfiddle.net/hysunny/z2L92kqz/）
(2）如果設(shè)定了top妒茬、right担锤、left、bottom等屬性乍钻，并且父元素設(shè)定position屬性（無論是absolute還是relative）肛循，則以父元素的左上角為原點(diǎn)進(jìn)行定位，位置由top团赁、right育拨、left、bottom決定欢摄，但是如果父元素存在padding屬性熬丧，則以content的左上角為原點(diǎn)進(jìn)行定位。
[示例]（https://jsfiddle.net/hysunny/2jgk2nzv/）
虛線框為正常原始位置怀挠。
點(diǎn)線框為content內(nèi)區(qū)域
我們可以看出析蝴，元素是以content為原點(diǎn)進(jìn)行定位的~
以上兩點(diǎn)總結(jié)：相對定位總是以父元素左上角為原點(diǎn)進(jìn)行定位的，如果父元素不存在或沒有position屬性或position屬性值為static绿淋，則以瀏覽器左上角進(jìn)行定位闷畸。
2. 絕對定位的屬性
(1）如果設(shè)定了top、right吞滞、left佑菩、bottom等屬性，并且父元素沒有設(shè)定position屬性裁赠，元素以瀏覽器左上角為原點(diǎn)進(jìn)行定位殿漠，位置由top、right佩捞、left绞幌、bottom決定。
[示例]（https://jsfiddle.net/hysunny/dw2wfh6n/）
由圖可以看出一忱，是相對于瀏覽器左上角進(jìn)行定位的~
(2）如果設(shè)定了top莲蜘、right谭确、left、bottom等屬性票渠，并且父元素設(shè)定position屬性（無論是absolute還是relative）逐哈，則以父元素的左上角為原點(diǎn)進(jìn)行定位，位置由top问顷、right鞠眉、left、bottom決定择诈。但是父元素存不存在padding屬性，對定位原點(diǎn)沒有影響出皇。
[示例]（https://jsfiddle.net/hysunny/2yL8Lo3k/）
虛線框為正常原始位置羞芍。
點(diǎn)線框為border內(nèi)區(qū)域
我們可以看出，父元素的padding并沒有影響到子元素的定位郊艘。
由以上兩點(diǎn)可以總結(jié)出：
若想把一個定位為absolute的元素定位于其父元素內(nèi)
必須滿足兩個條件：
1）至少設(shè)定top荷科、right、left纱注、bottom中的一個
2）父元素設(shè)定position屬性（值非static）
完畏浆。
總結(jié)內(nèi)容參考以下：
MDN: position
css中position屬性(absolute|relative|static|fixed)概述及應(yīng)用
詳解css相對定位和絕對定位
十分感謝你們的分享n(*≧▽≦*)n
注：原文章首發(fā)于：CSS position屬性總結(jié)，現(xiàn)遷移至此狞贱。
