定位的基本思想很簡單:
它允許你定義元素框相對於其正常位置應該出現的位置（relative），或者相對于父元素(absolute)、另乙個元素甚至瀏覽器視窗本身的位置(fixed)。顯然，這個功能非常強大，也很讓人吃驚。
div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即「塊框」。與之相反，span 和 strong 等元素稱為「行內元素」，這是因為它們的內容顯示在行中，即「行內框」。
css 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (x)html 中的位置決定。
塊級框從上到下乙個接乙個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（line box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。
以上介紹皆為鋪墊，接下來才是真正的講解postion這個屬性
大家都知道postion屬性有四個值，static fixed relative absolute,
今天我們就來剖析這四個值的特點，來揭開他們的神秘面紗：
1、static, 預設值，元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，行內元素則會建立乙個或多個行框，置於其父元素中。
2、
relative，元素框偏移某個距離，相對它在正常流中的位置，元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。偏移量通過top/left/right/bottom/設定
3、
absolute,
元素框從文件流完全刪除（自然其寬高對父元素毫無影響），並相對於postion值為relative其包含塊偏移定位。包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。
4、fixed ,元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。
補充說明：
relative定位：
1、設定乙個元素為相對定位後，如果不設定其偏移量（即 top|right|bottom|left值），則對於其本身而言，和沒設相對定位，毫無區別和影響，但可能對子元素有影響（比如有絕對定位的子元素）
2、相對定位的元素偏移到其它地方，其寬度高度不會改變（原本width預設100%,還是100%，這是和absolute不一樣的地方），不會擠壓掉別的地方原本的元素，但會重疊，重疊的效果是，會覆蓋掉未定位（即postion值為static）的元素，而不管其元素的html標籤在相對定位元素的前面還是後面，對應定位元素，則是根據z-index屬性值來，如果兩個值相等，則比較html標籤在文件中的先後。
3、設定相對定位元素的高度寬度會影響父元素的高度寬度（因為它的原來的坑還佔著，原來的坑會隨著元素的寬高改變大小）
absoute定位：
1、元素設定成絕對定位後，和父元素脫離關係（如果說有關係的話，就為設定偏移量前還在原來的位置，但不佔地方，其坑會被後面的兄弟元素霸佔，從而重疊），所以其大小變化對父元素毫無影響
2、元素絕對定位後都是塊級元素（即使原本是行級元素如span），不過其寬度不設定的話將是內容的實際大小，不在是預設的父元素的寬度，這點和相對定位是有很大區別的
3、千萬記住絕對定位元素是相對於，它的相對定位的父元素，如果父元素中沒有相對定位的則是相對於body
最後介紹下 z-index屬性，它只對定位元素（級postion不等於static）才有效
對CSS中定位屬性的深度剖析
首先，讓我們來分析一下普通流層，浮動流層和定位流層的區別。普通流層 比作乙個場地。人們要在場地中找尋自己的位置，不一定要對號入座，但必須按照椅子的擺放方式入座 比如椅子是圍成圓形的或是正方形的 總不能全部的人坐在乙個位置上，人摞人呀！這樣必定會發生混亂。浮動流層 你可以理解為在紙上放的一些東西，比如...
CSS中的定位屬性
css 定位令你可以將乙個元素精確地放在頁面上你所指定的地方。脫離原位置進行定位 下面舉個絕對定位的例子 在文件的四個角落各放四個盒子 html 段 box1 box2 box3 box4 css 段 div box1 box2 box3 box4 效果圖 保留原位置進行定位 其位置是相對於它在文件...
CSS中定位屬性的常見屬性值
在使用css對頁面布局時，我們常會使用到定位屬性，定位主要應用於乙個元素在另外乙個元素之上，或者我們需要在網頁中精準地確定某乙個元素的位置，並且這個元素有明確的參照物。其常見的屬性值有五個 一 position static 預設值 預設值通常沒有任何布局效果，定位中的static也是這樣的存在。二...