CSS的position總是屬性很容易讓人弄混~
為了仔細區(qū)別它們，所以今天總結一下CSS的position屬性~
下面是總結內(nèi)容~
有疏漏、錯誤之處敬請指出！o(^▽^)o
一、簡介
定義：position屬性規(guī)定元素的定位類型。
說明：這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對定位或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
默認值：static
繼承性：no
形式語法：static | relative | absolute | sticky | fixed
JavaScript語法：object.style.position = "absolute"
瀏覽器支持：所有主流瀏覽器都支持position屬性。但：任何版本的Internet Explorer(包括IE8)都不支持屬性值“inhert”。
二、取值
| 值 | 描述 |
|---|---|
| static | 默認值，沒有定位。元素出現(xiàn)在正常的流中。（忽略top、right、bottom、left和z-index屬性） |
| relative | 生成相對定位的元素，相對于其正常位置進行定位。 |
| absolute | 生成絕對定位的元素，相對于最近的非static父元素進行定位。絕對定位的元素可以設置外邊距（margin），且不會與其他他邊距合并。 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口(viewport)進行定位。 |
| sticky | 盒位置根據(jù)正常流計算，然后相當于該元素在流中的flow root(BFC)和containing block（最近的塊級元素）定位。 |
注：
文檔流：將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。
元素脫離文檔流的情況：浮動、絕對定位（absolute、fixed）。
三、 詳解
我們以一個初始未定位示例為參照，其他屬性值將和它進行比較。
[定位參照示例]（https://jsfiddle.net/hysunny/3gwbeu3v/）
1. static
默認值。沒有定位，元素出現(xiàn)在正常流中（忽略top，bottom，left，right或者z-index聲明）
解釋：position設置為static或不設定position屬性時，元素遵循正常的文檔流，對象占用文檔空間，該定位方式下，top、right、left、bottom、z-index屬性是無效的。
示例：[static定位]（https://jsfiddle.net/hysunny/zj2ogz8m/）
通過上例，可以看出position屬性設置為static和不設置其實是一樣的~
所以，通常此屬性值可以不設置，除非要覆蓋之前的定義。下面舉個栗子：
A頁面
#div-1{
position:absolute；
}
B頁面
#div-1{
position:absolute；
}
頁面B中`position:static;是為了覆蓋頁面A中position的定義。
2. relative
生成相對定位的元素，相對于其正常位置進行定位。
解釋：
(1）position設置為relative時，top、right、left、bottom等屬性有效，相對其正常位置移。
(2）position設置為relative時，元素遵照正常的文檔流，占據(jù)文檔空間，但是占據(jù)的文檔空間不會隨top、right、left、bottom的偏移而發(fā)生變動，也就是說，它后面的元素是依據(jù)前一個元素正常位置（即未設置top、right、left、bottom屬性之前）進行的定位。
(3）position設置為relative時，如果沒有進行任何的top、right、left、bottom設置，元素不會進行任何位置的改變。
示例：[relative定位-1]（https://jsfiddle.net/hysunny/ae8s2cm4/）
虛線是初始的位置空間。
由圖我們可以看出，相對定位是相對元素原本在文檔流中的位置而進行的偏移。并且它后面的元素——second是依據(jù)虛線位置，也就是元素原本在文檔流中的位置而進行的定位。
好了，我們現(xiàn)在知道了top、right、left、bottom等屬性不會改變relative定位的元素所占據(jù)的文檔空間。，那么margin、padding會改變該元素占據(jù)的文檔空間嗎？我們來試一下：
css代碼中添加margin屬性：
示例：[relative定位-2]（https://jsfiddle.net/hysunny/vxc9ctqs/）
由圖可以看出，我們將外邊距設置為20px，second元素向下偏移40px，所以margin可以改變元素所占文檔空間！同理，padding也可改變元素所占文檔空間，這里不多做演示。
3. absolute
生成絕對定位的元素，相對于非static定位的第一個父元素進行定位。
解釋：position設置為absolute，元素會脫離文檔流，整個元素不再占據(jù)文檔空間，就只能相對非static定位的第一個父元素進行定位
(1）absolute在無父級是非static定位時以<html>標簽作為原點定位，而relative和static方式在最外層時是以<body>標簽作為原點定位。<html>標簽和<body>標簽相差9px左右。
(2）position設置為absolute或fixed時，必須指定left、right、top、bottom屬性中的至少一個，否則left、right、top、bottom屬性會使用它們的默認值auto，這將導致對象遵從正常的HTML布局規(guī)則，在前一個對象之后立即被呈遞，簡單講就是都變成relative，會占用文檔空間，不會脫離文檔流。若多設，比如top和bottom一同存在的話，那么只有top生效；left和right一同存在的話，那么只有l(wèi)eft生效。
(3）絕對（absolute）定位對象和相對（relative）定位對象在可視區(qū)域之外會導致滾動條出現(xiàn)。而固定（fixed）定位對象放置在可視區(qū)域之外，滾動條不會出現(xiàn)。
示例：
[absolute定位-1]（https://jsfiddle.net/hysunny/q325w0k6/）
由此例我們可以發(fā)現(xiàn)absolute相對html定位，relative相對body定位。
下面我們再來看看對absolute定位的元素的除static外第一個父元素設置margin/padding，看看會不會對文檔空間有影響。
在absolute定位中添加margin/padding屬性：
[absolute定位-2]（https://jsfiddle.net/hysunny/59xv1qmx/）
由上圖我們可以看出，父元素的margin會讓子元素的absolute定位跟著偏移，而padding卻不會讓子元素發(fā)生偏移?？偨Y：absolute是根據(jù)父元素的border進行的定位。
4.fixed
生成絕對定位的元素，相對于瀏覽器窗口進行定位。
解釋： fixed定位，又稱固定定位，它和absolute定位一樣，都脫離了文檔流，并且能夠根據(jù)top、right、left、bottom屬性進行定位，但不同的是fixed是根據(jù)窗口為原點進行偏移定位的，也就是說它不會根據(jù)滾動條的滾動而進行偏移。
示例：[fixed定位]（https://jsfiddle.net/hysunny/cubxLga9/）
5. sticky
粘性定位。CSS3新屬性。它的表現(xiàn)類似position:relative和position:fixed的合體，在目標區(qū)域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區(qū)域時，它的表現(xiàn)就像position:fixed，它會固定在目標位置。
目前position: sticky;的瀏覽器兼容性還比較差。
示例：[sticky定位]（https://jsfiddle.net/hysunny/rztoc45w/）
6. inherit
規(guī)定應該從父元素繼承position屬性的值。
示例：[inherit定位]（https://jsfiddle.net/hysunny/4uLp2ybv/）
運行，我們發(fā)現(xiàn)second繼承了first的position屬性：fixed。同時超出可視區(qū)域之外時不會出現(xiàn)滾動條。
總結
1. 相對定位的屬性：
(1）如果設定了top、right、left、bottom等屬性，并且父元素沒有設定position屬性，元素以其父元素的左上角為原點進行定位。
[示例]（https://jsfiddle.net/hysunny/z2L92kqz/）
(2）如果設定了top、right、left、bottom等屬性，并且父元素設定position屬性（無論是absolute還是relative），則以父元素的左上角為原點進行定位，位置由top、right、left、bottom決定，但是如果父元素存在padding屬性，則以content的左上角為原點進行定位。
[示例]（https://jsfiddle.net/hysunny/2jgk2nzv/）
虛線框為正常原始位置。
點線框為content內(nèi)區(qū)域
我們可以看出，元素是以content為原點進行定位的~
以上兩點總結：相對定位總是以父元素左上角為原點進行定位的，如果父元素不存在或沒有position屬性或position屬性值為static，則以瀏覽器左上角進行定位。
2. 絕對定位的屬性
(1）如果設定了top、right、left、bottom等屬性，并且父元素沒有設定position屬性，元素以瀏覽器左上角為原點進行定位，位置由top、right、left、bottom決定。
[示例]（https://jsfiddle.net/hysunny/dw2wfh6n/）
由圖可以看出，是相對于瀏覽器左上角進行定位的~
(2）如果設定了top、right、left、bottom等屬性，并且父元素設定position屬性（無論是absolute還是relative），則以父元素的左上角為原點進行定位，位置由top、right、left、bottom決定。但是父元素存不存在padding屬性，對定位原點沒有影響。
[示例]（https://jsfiddle.net/hysunny/2yL8Lo3k/）
虛線框為正常原始位置。
點線框為border內(nèi)區(qū)域
我們可以看出，父元素的padding并沒有影響到子元素的定位。
由以上兩點可以總結出：
若想把一個定位為absolute的元素定位于其父元素內(nèi)
必須滿足兩個條件：
1）至少設定top、right、left、bottom中的一個
2）父元素設定position屬性（值非static）
完。
總結內(nèi)容參考以下：
MDN: position
css中position屬性(absolute|relative|static|fixed)概述及應用
詳解css相對定位和絕對定位
十分感謝你們的分享n(*≧▽≦*)n
注：原文章首發(fā)于：CSS position屬性總結，現(xiàn)遷移至此。
