1、static：預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
2、relative：生成相對定位的元素，通過top,bottom,left,right的設定相對於其正常位置進行定位。可通過z-index進行層次分級。
3、absolute：生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。
4、fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。
static與fixed的定位方式較好理解，在此不做分析。下面對應用的較多的relative和absolute進行分析：
1、relative。定位為relative的元素脫離正常的文字流中，但其在文字流中的位置依然存在。如圖1：
黃色背景的層定位為relative，紅色邊框區域為其在正常流中的位置。在通過top、left對其定位後，從灰色背景層的位置可以看出其正常位置依然存在。
2、absolute。定位為absolute的層脫離正常文字流，但與relative的區別是其在正常流中的位置不在存在。如圖2：
可以看到，在將黃色背景層定位為absolute後，灰色背景層自動補上
首先，是上面已經提到過的在正常流中的位置存在與否。
其次，relative定位的層總是相對於其最近的父元素，無論其父元素是何種定位方式。如圖3：
圖中，紅色背景層為relative定位，其直接父元素綠色背景層為預設的static定位。紅色背景層的位置為相對綠色背景層top、left個20元素。而如果紅色背景層定位為absolute，則情形如圖4：
可以看到，紅色背景層依然定義top:20px；left:20px；
但其相對的元素變為定位方式為absolute或relative的黃色背景層。因此，對於absolute定位的層總是相對於其最近的定義為absolute或relative的父層，而這個父層並不一定是其直接父層。如果其父層中都未定義absolute或relative，則其將相對body進行定位
，如圖5：
除top、left、right、bottom定位外，margin屬性值的定義也符合上述規則
absolute 與 relative 的運用
div css 進行網頁布局，適當地運用 absolute 與 relative，能給布局帶來意想不到的效果和方便，達到事半功倍，最近在有一篇關於 absolute 與 relative 的運用的文章，但講解不全面，不容易讀懂。下面我嘗試寫下一些我的看法，希望對你有幫助 詳細講解兩者的關係，需要配合...
absolute與relative的愛恨情仇
absolute 第一種情況 1,相對於乙個已定位的包含它的元素 父類 子類 菜鳥教程解釋 位置設定為 absolute 的元素，可定位於相對於第乙個已定位 非靜態的 的包含它的元素的指定座標。此元素的位置可通過 left top right 以及 bottom 屬性來規定。截圖 由結果可知，當父類...
Relative與Absolute組合使用
小夥伴們學習了絕對定位的方法 使用position absolute可以實現被設定元素相對於瀏覽器 body 設定定位以後，1 參照定位的元素必須是相對定位元素的前輩元素 div id box1 div id box2 相對參照元素進行定位 div div 從上面 可以看出box1是box2的父元素...