也許你看到這個標題覺得很簡單，確實這是一篇關於css中position屬性基礎知識的文章，但是關於position的一些細節也許你不了解。
在實際開發頁面布局時，運用position，對定位的塊級元素的巢狀的效果總是不太理解，這裡做了幾個測試
一般的在w3c中我們可以很容易的獲取定義:
static ： 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
fixed ：生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
inherit ：規定應該從父元素繼承 position 屬性的值。
absolute : 生成絕對定位的元素，相對於 s程式設計客棧tatic 定位以外的第乙個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative : 生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 left 位置新增 20 畫素。
總的來說 ：
static呢，就是正常的文件流順序，預設的，相當於沒有定位!
fixed呢， 就是相對於瀏覽器視窗，就是你滾動條怎麼滾動，他還是那個位置，就想是 「粘」 在視窗上了!
inherit呢， 就是從父元素繼承 position 屬性的值，
absolute呢，是脫離文件流的原來的位置是不繼續佔據了，如果他的父級元素中有已經定位了的不管是absolute的還是relative，它都會相對於他的父級元素來定位，如果他的父級元素中沒有定位了的那麼它就是相對於body來定位的。也就是說absolute的絕對是有參照物的！
relative呢，是不會脫離文件流的原來的位置也就繼續佔據了，它是只相對於自身原來的位置來定位的!
前三個是很容易理解的，對於absolute和relative的結合使用，做了幾個測試
測試（absolute和relative）
1.單獨的absolute和relative
2.relative中的relative，absolute中的relative
3.absolute中的absolute，relative中的absolute
複製**
**如下:
position -- absolute -- relative
absolute
分割relative
parentnode的position不是relative或absolute,那absolute的絕對物件是針對body的
parentnode的position 是relative或absolute,那absolute的絕對物件是針對parentnode的
也就是說absolute的絕對是有參照node的
absolute外的relative
relative內的absolute，，，裡面這個div是相對外面那個div定位的
absolute外的absolute
absolute內的absolute,,,,,,,,裡面這個div是相對外面那個div定位的
relative外的relative
relative內的relative,,,,,,,,裡面這個div是相對原來位置定位的
relative外的absolute
relative內的absolute，，，裡面這個div是相對原來位置定位的
其實很多時候，網上的經驗，很多很雜，自己實踐一下，才能自己真正理解。
css中三大position屬性值用法解讀
本文向大家簡單介紹一下css中position屬性值的使用，主要包括static:預設值，relative:相對定位，absolute:絕對定位三種，主要用於定位html元素的位置，並影響元素塊生成的方式，相信本文介紹對你一定會有所幫助。
css中position屬性值用法
css中position屬性有4種可選值:static,relative,absolute,fixed,用於定位html元素的位置，並影響元素塊生成的方式。這裡我們重點看一下position屬性的三個取值定義：position:static、absolute、relative。
static:預設值
如果沒有指定position屬性值，支援position屬性的html物件都是預設為static，可以這麼理解：把html頁面看作乙個文件流，源**中各個標籤的先後位置就是它們所對應的物件的呈現次序，所有取值為static的物件都按照你所編寫的html標籤的順序依次呈現。
relative:相對定位
此position屬性值保持物件所在文件流中的位置，也就是說它具有和static相同的呈現方式，它同樣占有在文件流中的固定位置，後面的物件不會侵占或覆蓋；與static屬性值不同的是，設定了relative的物件，可以通過top,left,right,bottom屬性設定自己的新顯示位置，這4個屬性的程式設計客棧取值是相對於文件流的前乙個物件的，你可以自由設定這4個屬性偏移到新的位置而不對文件流中的其他物件產生任何影響，原來的頁面呈現仍然會我行我素.
absolute:絕對定位
和relative不同的是，這個position屬性值會將當前物件拖出文件流，後面的物件會占有原來的位置，也就是說，當前物件的呈現是獨立顯示的，但是它的位置在指定top,left,right,bottom任一屬性之前仍是有繼承性的，這時的4個屬性的取值是相對於瀏覽器的，和文件流無關了。如果把示例中的b區域設定為absolute而不指定4個位置屬性，通過設定margin來改變它的相對位置，用這個方法可以解決前面提到的問題2。
我們溫馨提示:
屬性值為absolute物件的z-index屬性可以設定層疊顯示的次序，它是直接有效的；而屬性值為relative物件的z-index屬性在設定時要小心，把當前物件的z-index設定為-1是不行的，在firefox中它會無法顯示（注意，不是說瀏覽器有誤，而是指如果父物件是根元素body，那麼z-index是無效的，任何z-index設定都不會顯示在根元素之後，除了ie的解析bug，感謝#19提示），必須設定為0以上，我們如果想讓別的物件擋住它，只有將其他物件也設定position為relative，並將z-index屬性取乙個比它大的值即可。
本文標題: 談談你對css中position五個屬性的理解
本文位址:
《CSS五》CSS中的定位型別position
未脫離文件流，即瀏覽器按照dom結構從上而下，從左而右對頁面進行渲染時，某元素按照順序出現在頁面中。脫離文件流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。普通定位就是從上到下從左到右依次排布的布局。普通流中的元素的位置由元素在 x html 中...
來談談你對CSS盒模型的認識？
任何乙個網頁的搭建都離不開盒模型的堆砌。應該說css模型是web的乙個根基，最後呈現出來的效果不同無非就是在高寬 內容與背景刪的區別而已。那麼css模型有什麼認識的呢？首先，css盒模型有幾種呢？兩種。1 標準模型 2 ie模型 先來說說這兩種盒模型的區別在 看圖說話 標準模型與ie模型最大的區別在...
談談你對Spring的理解
spring是乙個開源的輕量級的應用開發框架，其目的是用於簡化企業級應用開發，降低 的侵入性和耦合度。spring提供的ioc和aop功能，可以將容器內的元件耦合度降低至最低，即解耦，為將來的工程 的維護提供了方便。spring為系統提供了乙個整體的解決方案，開發者除了可以利用它本身具有的功能外，還...