不錯的一篇總結性文章！

• 一、概述
• 二、position屬性
• 三、top,right,bottom,left屬性
• 四、float屬性
• 五、z-index屬性

一、概述

本文以標籤“<div></div>”為例進行講解，部分內容同樣適用於部分其它塊(block)標籤元素。
本文中的範例通過測試的瀏覽器為IE6、IE7、Firefox2。
<div> 標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。

我們在平時的網頁製作中，已經或多或少的接觸過CSS樣式表中的“position(位置)”屬性，其實這基本算是定位根源所在了。當然了，這並不是全部，如果再加上“float”、“z-index”等屬性，我們的層定位將會更加完美。下面我們將一一講解：

二、position屬性

position屬性有五個取值，分別為：static, relative, absolute, fixed, inherit, 其中“static”為預設值。

·static

該值為position的預設值，可以省略不寫，當position取值為static或者沒有設定position屬性的時候，div的顯示方式為按文字流的順序從上至下，或者從左到右順序顯示。
例如：
層一層二原始碼如下：

<div class="style">層一</div>
<div class="style">層二</div>
.style {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
margin-bottom:5px;
}

·relative

相對定位，相對於什麼位置呢？官方手冊中是這樣說的：“Relative position that is offset from theinitial normal position in theflow.”可以簡單的如此解釋：偏移文字流中最初的位置。最初位置也就是當position取值為static時的位置，也就是說這裡的相對定位是相對於它在正常情況下的預設位置的。
 例如 div[position="relative"] 設定了top 、left，那麼div的位置會根據“原來文件流的位置發生偏移，且不是相對整個視窗的top,left”,其後面的元素位置不變。
left,top 是相對自身文件流位置發生偏移，而不是父div的left,top。 例如： 父div 有兩個子divA,divB  ,divB文件流位置就在divA位置後面，divA的top設定成0px就可以與父視窗位置對齊,divB的top設定成0px則不行，因為divB相對自身文件流位置要往上面的父div 對齊的話，就是一個向上的負座標。

下圖列出了偏移產生前後的位置關係：

完整的程式碼如下：
偏移前：

<style type="text/css">
.style1 {
position:relative;
height:80px;
width:80px;
margin-bottom:10px;
border:1px solid #000;
background-color:#acd373;
}
.style2 {
position:relative;
height:80px;
width:80px;
border:1px solid #000;
background-color:#f26c4f;
}
</style>
<div class="style1">層一</div>
<div class="style2">層二</div>

偏移後：

<style type="text/css">
.style1 {
position:relative;
    left:30px;
top:30px;
    height:80px;
width:80px;
margin-bottom:10px;
border:1px solid #000;
background-color:#acd373;
}
.style2 {
position:relative;
height:80px;
width:80px;
border:1px solid #000;
background-color:#f26c4f;
}
</style>
<div class="style1">層一</div>
<div class="style2">層二</div>

結合以上圖示和CSS樣式表可以得出以下兩個結論：

• 設定了position:relative而不設定left,top等屬性的時候，層顯示的位置和不設定position屬性或者position值取static時一樣。
• 當一個層設定了position:relative，而且使得層位置產生相對偏移時，並不影響文字流中接下來的其他層的位置。

另外我們還可以做如下嘗試，當層二對應的css樣式表“style2”不設定position:relative時，會發現層一偏移後重疊時，層一覆蓋了層二。而不是我們圖示上層二覆蓋了層一。
原因時這樣的，當設定了position:relative，層的層疊級別高於預設的文字流級別。當然了，如果都設定了position:relative，同等級別下將會按照文字流的順序層疊顯示。

·absolute

絕對定位，回憶一下，當我們設定position的值為static或者relative時，層依然存在於文字流中，也就是不管位置是否偏移，文字流中依然為它保留了該有的位置。但當層設定了position:absolute併產生偏移（設定了top,left等值）時，該層將完全從文字流中脫離( 後面的元素在文件流中位置不受其影響)，進而以該層所在的父容器的座標原點為參考點進行偏移，可以這理解，該層已經和同級容器中的其它元素脫離了關係，也不會對其它元素產生人和影響（當它不存在！）。
注意：如果父容器沒有設定position屬性或position值為static時，將以body的座標原點為參考。

下面我們以三個圖示來分別說明。

上面三個頁面效果的css樣式表如下：

頁面一：
<style type="text/css">
.style1 {
height:150px;
width:150px;
border:1px solid #000;
background-color:#a2d39c;
}
.style2 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#f68e56;
}
.style3 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#00adef;
}
</style>
<div class="style1">
<div class="style2"></div>
<div class="style3"></div>
</div>
頁面二：
<style type="text/css">
.style1 {
height:150px;
width:150px;
border:1px solid #000;
background-color:#a2d39c;
}
.style2 {
    position:absolute;
top:0;
left:0;
    height:50px;
width:50px;
border:1px solid #000;
background-color:#f68e56;
}
.style3 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#00adef;
}
</style>
<div class="style1">
<div class="style2"></div>
<div class="style3"></div>
</div>
頁面三：
<style type="text/css">
.style1 {
    position:relative;
    height:150px;
width:150px;
border:1px solid #000;
background-color:#a2d39c;
}
.style2 {
    position:absolute;
top:10px;
left:10px;
    height:50px;
width:50px;
border:1px solid #000;
background-color:#f68e56;
}
.style3 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#00adef;
}
</style>
<div class="style1">
<div class="style2"></div>
<div class="style3"></div>
</div>
    通過以上的範例和理論說明，我們應該從原理上理解了absolute定位。這裡補上官方對於absolute的解釋：
“Taken out of the flow and offset according to the containing block. ”

截至這裡，希望各位可以稍作休息，嘗試修改上面範例中的css屬性，做到舉一反三，充分理解。

·fixed

固定定位，它的效果類似常見的浮動廣告，無論如何拖動瀏覽器的滾動條，層始終懸浮在瀏覽器的某個位置。由於該屬性只能被Firefox很好的支援，雖然可以在通過其它設定在IE6.0中得到同樣的效果，但由於本文篇幅原因，不繼續對本屬性繼續作解釋。下面的經典案例中將會有相關解釋。

·inherit

繼承，和其它屬性的繼承一樣。在這裡為繼承父元素中的position值。

三、top,right,bottom,left屬性

這四個屬性中的top和left屬性之前有使用過（right和bottom用法也一樣），大致功能我們基本已經清楚了，這裡再簡單介紹一下。

這四個屬性在設定了position屬性，並且值不為static時生效。當position取值relative時，偏離文字流初始位置；當position取值absolute時，以父容器對應的初始點為原點偏移，如果父容器沒有設定positon或者position取值static時，以body對應的座標點為參考點偏移。    top,right,bottom,left屬性的取值除了具體的數值外，還可以是百分比、繼承、或者auto（預設值）。

auto的設定： 當div[position="absolute"]時，width:auto;根據內容自動設定寬度，當div[position="relative"]時,auto為父div寬度，如果沒有父div，則為視窗寬度

四、float屬性

取值包括inherit，left，right以及預設值none，該屬性用於控制文字流的顯示方向。需要注意的是如果設定了該屬性並取值為 left或right後，會影響到該流後面的其它盒子模型。可以通過設定“clear:both;”清除該屬性設定。 例如：

層一層二層三

原始碼如下： <div class="style1">層一</div>
<div class="style1">層二</div>
<div class="style2">層三</div>
.style1 {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
    float:left;
    margin-bottom:5px;
}
.style2 {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
    clear:both;
    margin-bottom:5px;
}

需要注意的是由於float控制的是文字流方向，當為層設定了“position:absolute;”後，float將不再有效，因為absolute的層已經脫離該文字流。
auto的設定： 當div[position="absolute"]時，width:auto;根據內容自動設定寬度，當div[position="relative"]時,auto為父div寬度，如果沒有父div，則為視窗寬度
float 控制文字流的顯示方向，當一個 父div中的子div 都是float時，父div高度，和寬度是不會根據內容而適應的。
div為float時，它的下一個非float的div 的margin相對於float的div是無效的，只有都是float才有效；因為影響下一個元素的位置，所以div為float的margin可以影響下一個div的位置，不管他是否為float

float影響下一個文件流的顯示方向，從上至下，或從左至右。從左至右這種情況是指：如果float的div設定的高度很高，那麼下一個元素的位置受它高度的影響。
例：
<div style="background-color:#ff0000; float:left; width:100px; height:50px;">sss</div>
ssssssssssssss<br />sssssssssssssssss<br/> ssssssssssssss
如果不想受float 的影響，新增<dir style="clear: both;"></dir>就可以了，接下來的元素就是換行顯示。

五、z-index屬性

該屬性在設定了position並取值為“absolute”或“relative”時有效，用於控制層在Z- 軸上的排列順序，值為整數（由於不同瀏覽器的相容性的區別，最好是正整數），取值越大層越在最上面。

Code:
relative.html

1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
5. <title>Insert title here</title>
6. <styletype="text/css">
7. html{  
8.     font-size: 12px;  
9. }  
10. body{  
11.     //color: #666666;  
12. }  
13. div{  
14.     border: 1px solid #666666;  
15. }  
16. .style {  
17.     border: 1px solid #999900;  
18.     background-color: #CCFF99;  
19.     width: 80px;  
20.     height: 80px;  
21.     margin-bottom: 5px;  
22. }  
23. </style>
24. </head>
25. <body>
26.                             <!-- position預設為 static -->
27. <divclass="style"style="position: static;">層一</div>
28. <divclass="style">層二</div>
29.                             <!-- 相對位 relative-->
30. 偏移前：  
31. <styletype="text/css">
32. .style1 {  
33.     position: relative;  
34.     height: 80px;  
35.     width: 80px;  
36.     margin-bottom: 10px;  
37.     border: 1px solid #000;  
38.     background-color: #acd373;  
39. }  
40. .style2 {  
41.     position: relative;  
42.     height: 80px;  
43.     width: 80px;  
44.     border: 1px solid #000;  
45.     background-color: #f26c4f;  
46. }  
47. </style>
48. 相關推薦

    div+定位與浮動

    不錯的一篇總結性文章！ 一、概述二、position屬性三、top,right,bottom,left屬性四、float屬性五、z-index屬性 一、概述 本文以標籤“<div></div>”為例進行講解，部分內容同樣適

    CSS 定位與浮動

    head pla 控制 spl tex index ati top 同一行 CSS 定位　　 Static：元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。 　　相對定位(relative)：與最近的一個元素進

    CSS—定位與浮動

    1.CSS定位 通過css定位可以實現頁面元素的指定效果顯示。它允許你定義元素框相對於其正常 位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。 position 定位屬

    後端碼農談前端（CSS篇）第七課：定位與浮動

    一、定位： 1、定位的理解 （1）相對定位 相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。 如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 3

    CSS之——盒子模型、盒子的定位與浮動

    一、CSS盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。 CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。 盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

    css元素定位和浮動、元素的隱藏與顯示

    一、Css元素定位 position用於設定元素定位 該屬性有以下值 static 預設值，採用元素預設的定位方式。 relative使元素對其原始位置進行“相對定位”。 absolute使元素根據父（祖先）父元素的定位情況進行“絕對定位”。 fixed使元素相對於瀏覽器視窗進行“固定定位”

    div中的相對定位與絕對定位

    這一段時間打算完全用CSS的DIV編寫一個頁面，做了兩天思緒就有點亂了。 有的時候把某一個問題單獨抽出來看感覺很簡單。而複合起來就難的多,各種各樣的問題就來了。 程式中最討厭的就是找BUG了。思路前後銜接不上，捋不清頭緒，看的頭都大了。 家裡有兩個高手，不過卻很少問。就像我

    CSS position 屬性 絕對定位與相對定位，以及浮動

                    以前一直很模糊定位原理，以為absolute與relative必須配合使用，使用absolute必

    CSS position 屬性：絕對定位與相對定位，以及浮動

    以前一直很模糊定位原理，以為absolute與relative必須配合使用，使用absolute必須父標籤必須設定為relative。 可能的值：absolute，fixed，relative，s

    浮動與定位，浮動定位(html5技術)

    　　浮動與定位在網頁設計中應用得很廣泛，是兩種主要佈局方式的實現方法。 　　我們知道，網頁上一般來說，塊標籤是自上而下的一塊塊堆疊，行內標籤則在一行內從左到右依次並排，如果所有網頁的都這樣機械的排列著，也太單調了，所以有沒有一個東西讓標籤內容脫離這種文件流呢，首先就可

    JavaWeb前端-CSS定位與DIV佈局實戰-新疆行知書網頁設計

    本文程式碼為CSS定位與DIV佈局實戰-新疆行知書網頁設計的程式碼 by：arsoooo 網頁效果如下： 原始碼（相關檔案下載在最後） index.html檔案程式碼 //index.html的程式碼如下 <!doctype html> <h

    Web前端面試指導(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?

    web前端題目點評這道題目的提問比較多，連續問了三個問題，正常元素、絕對定位元素、互動元素如何居中，而且居中沒有說清楚是垂直居中還是水平居中，要回答清楚這個問題，必須得有深厚的功底，而且要分類的來回答，條理要清楚。可以先把水平居中各種情況說清楚，然後在把垂直居中說清楚。（一）元素水平居中的方式1）行級元素水平

    相對定位與絕對定位聯合使用

    image 什麽 png col 內容 -c 位置 blog 定位在 使用相對定位可以很方便的原來的位置上，移動一下，但是又會占用原來的位置，後面的內容接不上來 。 有時候，希望一個元素在原來的位置上，移動一下，但是又不占用位置，這個時候，就需要絕對定位和相對定位組合使用了

    css關於相對定位與絕對定位

    css 1.一般如果我們不給元素設置position，則默認為static，此時是該元素是沒有定位的，像left/right這些偏移屬性都是沒有效果的。 2.position:relative （相對定位） 若設置為相對定位，即可配置left/right這些偏移，相對於該元素原有位置

    理解css+Div定位

    數值 hid 模型 http 影響 收藏 塊級元素 padding 不能 一、DIV標記與SPAN標記 div和span都可以作為一個容器，集體控制容器內的樣式 區別是div使塊級元素，前後會有換行 而span是行內元素，前後不會換行二、盒子模型 1，概念 任何頁面元素都可

    CSS 相對/絕對(relative/absolute)定位與jQuery的控制顯示隱藏

    append scrip idt 元素 nes width play isp relative 曾經寫顯示隱藏老是用jq方法控制： dom.show(); dom.hide(); 事實上這樣還是有非常多缺陷的。 這是html結構：

    定位與權限

    系統版本 @override 單位 push developer toa 得到 設置 tin 就昨天，我遇到一個神奇的問題，就是android原生的GPS定位在我的魅族4上跑的順順利利，但是一到了紅米note4x或者最近的新android上就不能定位了，我把高德百度的定位接

    Selenium-元素定位與操作

    標簽 隨著 link 插件 麻煩 路徑 操作 _id 快捷 UI的自動化本質就是識別元素,操作元素,而元素的識別就是通過HTML的標簽和屬性,所以對於基本的HTML的只是是必備的 隨著頁面復雜度的提升,加之很多公司的開發也沒有統一規範,這就給識別元素造成了非常大的麻煩,非常

    Halcon學習筆記——條形碼的定位與識別

    tex 學習筆記 nbsp com ima -s 灰度 套路 筆記 一維碼的原理與結構 條碼基本原理是利用條紋和間隔或寬窄條紋（間隔）構成二進制的”0“和”1“，反映的是某種信息。 一維條碼數據結構，分四個區域。組成分別

    達內-靜態路由與浮動靜態路由-（配圖詳解版）

    達內-靜態路由與浮動靜態路由-（配圖詳解版）路由： 不同網段之間的通信，稱之為“路由”。實現： 路由設備：路由器，多層交換機本質： 通過查詢“路由表”實現“不同網段之間的路由功能”。路由器的工作原理： 1、路由器僅僅關心數據中的 “ 目標IP 地址” ； 2、路由器提取 目標IP