CSS之float,文件流,position詳解

阿新 • • 發佈：2022-03-14

1 CSS浮動
2 定位
- 2.1 定位屬性
- 2.2 z-index屬性

1 CSS浮動

1.1 浮動定義

float即為浮動，在CSS中的作用是使元素脫離正常的文件流並使其移動到其父元素的最左邊或最右邊。下面解釋下這個定義中的幾個名詞的概念：

文件流：在html中文件流即為元素從上至下排列的順序。
脫離文件流：元素從正常的排列順序被抽離。
最左邊/最右邊：上述的移動到父元素最左和最右是指元素往左或往右移動直到碰到另一個浮動元素或父元素內容區的邊界（不包括padding

）

1.2 Float造成的影響

1.2.1 對其父元素的影響

對於其父元素來說，元素浮動之後，它脫離當前正常的文件流，所以它也無法撐開其父元素，造成父元素的塌陷，效果如下圖所示

#wrapper {
    padding: 20px;
    border: 1px solid red;
    width: 350px;
}
.floatL {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    float: left;
}
.floatR {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    float: right;
}
.blue {background: #6AA;}
.red {background: #A66;}

//html
<div id="wrapper">
    <div class="floatL blue">AAAAAAAA</div></div>

1.2.3 對其兄弟元素（非浮動）的影響

如果兄弟元素為塊級元素，在現代瀏覽器和IE8+下，該元素會忽視浮動元素的而佔據它的位置，並且元素會處在浮動元素的下層（並且無法通過z-index屬性改變他們的層疊位置），但它的內部文字和其他行內元素都會環繞浮動元素
需要注意的是，在IE 6、7下則分別都有不同的表現，IE 6、7中，該兄弟元素會緊跟在浮動元素的右側，並且在IE6中兩者之間留有3px的空隙。這就是著名的IE 3px bug

//CSS，其他的樣式按照上面給出的，此處就不再重複了
.block {
    width: 200px;
    height: 150px;
    border: 1px solid #000;
    background: #CCC;
}

<div id="wrapper">
    <div class="floatL blue">AAAAAAAA</div>
    <div class="block">BBBBBBBBB</div></div>

IE 6：

IE 7：

如果如果兄弟元素為 內聯元素，則元素會環繞浮動元素排列。

<div id="wrapper">
    <div class="floatL blue">AAAAAAAA</div>
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>

<div id="wrapper">
    <div class="floatL blue">AAAAAAAA</div>
    <img src="XXX.png"></div>

1.2.4 對其兄弟元素（浮動）的影響

同一個方向的浮動元素：
當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們後面，可以用這樣一個形象的比喻來描述：在一個購票中心裡，某人從一條購票佇列跑到旁邊的一條購票佇列中排隊，那自然先跑過去的會先佔據前面的位置。但這條購票佇列還是位於當前的購票中心中，因此這條浮動的佇列和正常的文件流佇列也依舊在同一個父元素當中。

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatL blue">BBBBBBBBBB</div></div>

反方向的浮動元素：
正如上面的比喻所述，我們可以假設購票中心裡左右兩邊的各有一個購票點（如圖,這裡我們把一個div看做一個購票者），左浮動的佇列可看做左購票點的購票佇列，反方向的浮動（即右浮動）則是右邊購票點的購票佇列，所以在購票中心足夠寬的時候兩條佇列的人群是互不受影響的。因此他們在同一條水平線上

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatR blue">BBBBBBBBBB</div></div>

但當購票中心過窄或者左右兩邊的購票佇列過長時，其中一條佇列則會另起一行排列（此處為B佇列，有人可能會問為什麼不是A佇列另起一行？從下面HTML結構上可知，這是因為在時間上，A佇列比B佇列更早地建立，根據先到先得的原則，B佇列的購票者在位置不夠的時候自然要另起了一行了）。

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatR blue">BBBBBBBBBB</div>
    <div class="floatR blue">BBBBBBBBBB</div></div>

當同一行中連一個購票者的位置都容不下時，兩條佇列則會錯開兩行

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatR blue">BBBBBBBBBB</div>
    <div class="floatR blue">BBBBBBBBBB</div></div>

1.2.5 float對自身元素的影響

float物件將被視作塊物件(block-level)，即display屬性等於block

1.2.6 float對子元素的影響

我們知道當一個元素浮動時，在沒有清楚浮動的情況下，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身，並且在沒有定義具體寬度情況下，使自身的寬度從100%變為自適應（浮動元素display:block）。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值。

這裡我們去掉#wrapper的固定寬度,並在其外部增加一個固定寬度的div,以便更好地展示

<div class="container">
    <div id="wrapper">
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
    </div></div>

<div class="container">
    <div id="wrapper" style="float:left;">
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
    </div></div>

.block {
    width: 250px;
    height: 50px;
    border: 1px solid #000;
    background: #CCC;
}

<div class="container">
    <div id="wrapper" style="float:left;">
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
        <div class="block"></div>
    </div></div>

.block { width: 150px; height: 150px; border: 1px solid #000; background: #CCC; }

1.2.7 float對父元素之外的元素的影響

父元素之外的非浮動元素
從上面可知，當一個元素浮動時，在沒有清楚浮動的情況下，它無法撐開其父元素，也就是父元素的寬高都為0。並且其父元素之外的非浮動元素也會無視該浮動元素，浮動元素彷彿到了另外一個世界裡。

//CSS
.outer {
    height:150px;
    width: 350px;
    border:1px solid blue;
}

//HTML
<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
</div>
<div class="outer"></div>

父元素之外的浮動元素
當浮動元素的父元素之外的元素為浮動元素時，他們彷彿去到了同一個世界裡。
兩個元素的浮動方向相同時：

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div></div><div class="outer" style="float:left;"></div>

兩個元素的浮動方向相反時：
//CSS,這裡我們在他們外面增加一個固定寬高的div以便展示，否則右浮動的元素會浮動到body的右邊界

.container {
    width:650px;
    height: 250px;
    border: 1px solid #000;
}

<div class="container">
    <div id="wrapper">
        <div class="floatL red">AAAAAAAA</div>
    </div>
    <div class="outer" style="float:right;"></div></div>

<div class="container">
    <div id="wrapper">
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
    </div>
    <div class="outer" style="float:right;"></div></div>

1.2.8 浮動讓margin-top屬性失效

關於margin-top屬性失效的解決方法
常出現兩種情況：

1.2.8.1 margin-top失效

先看下面程式碼：

<div> 
<div classdivclass="box1">float:left</div> 
<div classdivclass="box2">clear:both;margin-top:20px;</div> 
</div>

兩個層box1和box2，box1具有浮動屬性，box2沒有，這時候設定box2的上邊距margin-top沒有效果。
網上能找到的兩種比較靠譜的解釋：

“在CSS2.1中，水平的margin不會被摺疊；垂直margin可能在一些盒模型中被摺疊…”
當第一個層浮動，而第二個沒浮動層的margin會被壓縮，

得到解決問題思路：要浮動一起浮動，要就一起不浮動。
解決辦法：

box2增加float屬性
box1與box2之間增加一層<div style="clear:both;"></div>

1.2.8.2 子元素設定margin-top作用於父容器

<div classdivclass="box" style="height:100px;background:red;"> 
<div classdivclass="box2">clear:both;  
margin-top:20px;height:50px;width:500px;  
background:#000;</div> 
</div>

當給box2設定margin-top時，在FF下僅作用於父容器。
解決辦法：

給父容器box加overflow:hidden;屬性
父容器box加border除none以外的屬性
用父容器box的padding-top代替margin-top

1.3 包含浮動

建立一全頁面的佈局時，浮動是一種常用的方法，也是頁面元素定位的一種基本功能。浮動可以讓元素一個挨著一個。浮動可以建立一個自然流佈局，同時充許元素設定自身尺寸和其父元素容器的尺寸大小。
當元素浮動時，一個元素的位置依賴於放置在他周邊的其他元素。那麼圍繞在他周邊的是哪個元素呢？這個元素會換行嗎？這一切都取決於圍繞於他的元素的DOM（文件物件模型）。

1.3.1 清除浮動

雖然浮動相當的給力，但他們自己還是存在一定的問題。最典型的問題就是一個父元素包含了多個浮動的子元素。頁面的內容設定了一個寬度，子元素的浮動確定了他們的位置，但浮動元素不會影響父元素的寬度。這樣做會讓父元素塌陷，從而使父元素的高度為0，以及忽略其他的屬性。很多時候，這種現像都被忽略，特別是在父元素沒有任何樣式，以及其子元素看起來都正確的對齊。
巢狀的元素不會正確的排列，也會有錯誤的樣式出現。來看看下面的演示，在.box-set的div應該有一個高亮的灰色背景，因為所有的子元素浮動後，這個灰色的背景色並不看到。仔細檢查後，.box-set的高度變成了“0

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>

.box-set {
  background: #e8eae9;}.box {
  background: #8ec63f;
  height: 100px;
  float: left;
  margin: 10px;
  width: 200px;}

有一種方法，在容器的結束標籤前新增一個空標籤，在空標籤上直接設定樣式clear:both。用這種方法來清除浮動，在大多數情況下是有效的，但這不太適合語義化。這取決於一個頁面有多少浮動需要清除，這樣造成頁面上的空標籤迅速堆積，而且在頁面中沒有上下文內容。
幸運的是有幾種不同方法可以用來清除浮動，而其中用得最多的是overflow技巧和clearfix技巧。

1.3.1.1 Overflow技巧

一種清除浮動的技巧是使用overflow屬性。在具有浮動元素的父容器中設定overflow的屬性值為auto，這樣父容器就會有一個高度存在，在我們例子中的灰色背景也就能看得到了。
在IE6裡面，父容器是需要設定一個width和height。因為高度可能是一個變數，寬度為100%，他們將能正常的工作。使用overflow:auto;,在IE瀏覽器中會給元素新增滾動條，這樣一來，最好是直接使用overflow:hidden;來清除浮動。

.box-set {
  background: #404853;
  overflow: auto;}

清除浮動後效果

使用overflow技巧清除浮動，確實存在一些缺點。例如：當你新增樣式，或者將巢狀在裡面的span元素移動到父容器的外面，或者你想給元素新增一個盒子陰影和製作一個下拉選單。在下面的演示例子中，你可以看到元素的盒子陰影被切斷在父元素之內。
不同的瀏覽器對overflow屬性解析不一樣，在瀏覽器的顯示風格也不一樣。看看下面的例子，注意列在不同瀏覽器的顯示效果

1.3.1.2 clearfix技巧

根據上下文，清除浮動更好的方法是clearfix技巧。clearfix清除浮動的技術是有點複雜，但是有比使用overflow技巧清除浮動更好的方法？
“clearfix技巧是基於在父元素上使用:before和:after兩個偽類。使用這些偽類，我們可以在浮動元素的父容器前面和後面建立隱藏元素。:before偽類是用來防止子元素頂部的外邊距塌陷，使用display: table建立一個匿名的table-cell元素。這也確保在IE6和IE7下具有一致性。:after偽類是用來防止子元素的底部的外邊距塌陷，以及用來清除元素的浮動。
採取上面同樣的例子，可以看到容器也清除了浮動，元素也可以移到父容器外面

.box-set:before,
.box-set:after {
  content: "";
  display: table;}
.box-set:after {
  clear: both;}
.box-set {
  *zoom: 1;}

清除浮動後效果

1.4 文件流

1.4.1 定義

用W3C上面的一句話來概括：元素的位置由元素在 (X)HTML中的位置決定
要很好的理解上面這句話，可以用排除法。CSS的定位機制有3種：

普通流
浮動（float：left/right/none）
定位 （position:static/relative/absolute/）

普通流就是正常的文件流，在HTML裡面的寫法就是從上到下，從左到右的排版佈局。

例：

<div id=”01”></div>
<div id=”02”></div>
<div></div>

很顯然這是最普通的文件流，從左到右，一個挨一個按照順序01先，02其次，03最後排列。

一旦給其中的某個DIV進行FLOAT屬性或者absolute定位（不包括static/relative，這兩個依然保持正常的文件流），則它完全脫離文件流，不佔空間。

為了能更好辨認，分別給01綠色，02灰色，03黃色。然後再給01左浮動。結果，01脫離了文件流，完全不佔空間，所以02順勢頂替了01原來的位置，結果02被01蓋住了。

同理，absolute定位跟FLOAT一樣，脫離了文件流，不再佔原來文件流的空間了。
再舉一個大家在日常經常遇到的問題來印證—高度自適應
反覆想一想，高度自適應的原理其實就是這個：

<div id=”a”>
<div id=”b”>這是b</div>
<div id=”c”>這是c</div>
</div>

這個結構是a包住b和c，顏色不變，a的高度為自動，b的高度為100，C的高度為500。b和c都為左浮動
結果：很明顯a沒有被撐開。原因是它們浮動了就不再佔空間了。既然沒有空間可佔，那就等於容器裡沒有東西，所以不撐開。解決辦法是在黃色DIV的後面加個DIV，然後清除浮動。讓他有空間可佔，自然就撐開了

1.4.2 總結

CSS的定位機制有3種：普通流、浮動和定位。
文件流：從上到下，從左到右，一個挨一個的簡單或者叫正常佈局。
定位：（position）

Static：保持文件流。
Relative：相對本身的原始位置發生位移且保持文件流，自己佔有空間
Absolute：脫離文件流，不佔空間且相對於其包含塊來定位。

浮動：（flaot）脫離文件流，不佔空間。
以前總是覺得position：static這個屬性很多餘，現在看來他的作用就是讓元素保持文件流的

2 定位

2.1 定位屬性

很多情況下，需要控制更多元素的位置，而且超過了浮動所能提供的範圍，這個時候我們就需要發揮position屬性的作用。position屬性提供五個不同的屬性值，每種不同的方式可以給元素提供不同的位置。

2.1.1 Position static

元素都有position屬性，其預設值是static，這也意味著，他們沒有也不接受位置屬性設定（top、right、bottom、left屬性值設定）。另外元素設定了position屬性，將會覆蓋元素的預設值static。
在下面的演示中，所有的盒子都是靜態的，每個盒子都在相鄰盒子頂部，因為他們都是塊元素，而且沒有進行浮動設定。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>

.box-set {
  background: #e8eae9;}.box {
  background: #8ec63f;
  height: 80px;
  width: 80px;}

效果

2.1.2 Position relative

relative是position的另一個屬性值，它和static屬性值非常的相似。主要的區別是relative可以給元素設定位移（offset）top、right、bottom和left屬性。通過這些位移屬性設定可以給元素進行精確的定位。我們要搞清它是相對哪個物件來進行偏移的。答案是它本身的位置

盒子位移屬性是如何工作

盒子的位移屬性有四個top、right、bottom和left，用來指定元素的定位位置和方向。這些屬性只能在元素的position屬性設定了relative、absolute和fixed屬性值，才生效。
對於相對定位元素，這些屬性的設定讓元素從預設位置移動。例如，top設定一個值20px在一個相對定位的元素上，這個元素會在原來位置向下移動20px。反之，top設定一個-20px，這個元素會在原來的位置向上移動20px。
對於絕對定位和固定定位，這些屬性指定了元素與父元素邊緣之間的距離，例如，絕對定位的元素設定一個top值為20px，將使絕對定位元素相對於其設定了相對定位的祖先元素頂部邊緣向下移動20px，反之，如果設定一個top值為-20px，將使絕對定位元素相對於其設定了相對定位的祖先元素頂部邊緣向上移動20px。（絕對定位的參考點是其祖先元素設定了relative或者absolute值）

設定了位移屬性的相對定位元素，在頁面中仍然是正常的、靜態的，仍屬於自然流。在這種情況下，其他元素不會佔用相對定們元素當初的位置。此外，其他元素沒有進行位置移動時，相對定伴元素可能會和其他元素重疊。
在下面的演示中，每個元素還是在另一個元素頂部，然後他們根據自己移位屬性，從預設位置進行移動，由於他們移向方向不一樣，這些值使元素重疊在一起。當元素設定了相對定位時，周邊的元素也能看到相對定位元素的預設位置。（也就是說，相對定位元素的預設位置還是被元素自身佔用，別的元素是無法佔用的。也就是說相對定位元素的位移是相對於元素自身的邊緣進行位移）。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>

.box-set {
  background: #e8eae9;}.box {
  background: #8ec63f;
  height: 80px;
  position: relative;
  width: 80px;}.box-1 {
    top: 20px;
  }.box-2 {
  left: 40px;}.box-3 {
  bottom: -10px;
  right: 20px;}

效果：

事實上，一個相對定位元素同時設定了top和bottom位移屬性值，實際上top優先順序高於bottom。然而，一個相對定位元素同時設定了left和right位移屬性，他們的優先順序取決於頁面使用的是哪種語言，例如，如果你的頁面是英文頁面，那麼left位移屬性優先順序高，如果頁面是阿拉伯語，那麼right的位移屬性優先順序高。

2.1.3 Position absolute

絕對定位元素也具有盒子位移屬性，然而，絕對定位元素會脫離文件流。絕對定位元素直接從文件流中移出，絕對定位元素的位置直接和父容器是否設定了相對定位（絕對定位）有直接關係。絕對定位元素需要至少一個祖先元素設定了相對定位（絕對定位），不然元素定位會相對於頁面的主體進行定位。
使用絕對定位的元素可以指定垂直和水平的位移屬性，使絕對定位元素相對於設定了相對定們的祖先元素邊緣進行移位。例如，一個絕對定位的元素設定了top值為50px和一個right值為100px,絕對定位元素會相對於其設定了相對定位的父元素的頂邊向下移動50px;向左移動100px。
然而，使用了絕對定位的元素並沒有進行任何盒子位移屬性設定，那麼絕對定位元素的頂部和左部會和設定了相對定位的父元素的頂邊和左邊重合。如果設定了一個盒子位移屬性，比如說top，那麼絕對定位元素垂直方向會進行移動，而水平位置預設還是左邊對齊。
在下面的演示中，可以看到所有的盒子都相對於div的父元素進行絕對定位，每個元素都從特定的面使用定位值進行移動，而且使用了負值的，元素移動到盒子的外面。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>

.box-set {
  background: #e8eae9;
  height: 200px;
  position: relative;}
  .box {
  background: #8ec63f;
  height: 80px;
  position: absolute;
  width: 80px;}
  .box-1 {
  top: 6%;
  left: 2%;}
  .box-2 {
  top: 0;
  right: -40px;}
  .box-3 {
  bottom: -10px;
  right: 20px;}
  .box-4 {
  bottom: 0;}

效果

當一個絕對定位的元素有固定的高度和寬度，並且盒子位移同時設定了top和bottom時，top更具優先組，另外和相對定位元素一樣，當同時設定了left和right時，優先順序取決於他的頁面使用的語言。
當一個絕對定位的元素沒有明確指定高度和寬度，同時使用盒子位移的top和bottom屬性時，會使整個元素的高度跨越整個容器。同樣的，當這個元素同時使用位移left和right屬性值，會使整個元素的寬度跨越整個容器。如果同時使用位移四個屬性，可以指定一個寬度和高度顯示元素。（這個時候絕對定位元素的寬度和高度都是100%。）

總結：當position設定為absolute後，其到底以誰為物件進行偏移呢？這裡分為兩種情況：

當父物件(或曾祖父，只要是父級物件)parent也設定了position屬性，且position的屬性值為absolute或者relative時，也就是說，不是預設值的情況，此時按照這個parent來進行定位。
注意，物件雖然確定好了，但有些細節需要您的注意，那就是我們到底以parent的哪個定位點來進行定位呢？如果parent設定了margin，border，padding等屬性，那麼這個定位點將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進行定位，這與我們會想當然的以為會以margin的左上端開始定位的想法是不同的。
如果不存在一個有著position屬性的父物件，那麼那就會以body為定位物件，按照瀏覽器的視窗進行定位，這個比較容易理解

2.1.4 Position fixed

固定定位和絕對定位很類似，但是定位是相對於瀏覽器視窗，並且不會隨滾動條進行滾動。也就是說，不管使用者停留在頁面那個地方，固定定位的元素將始終停留在頁面的一個地方
fixed是特殊的absolute，即fixed總是以body為定位物件的，按照瀏覽器的視窗進行定位
position屬性值中，僅有fixed屬性值不能在IE6瀏覽器下執行，如果你想在IE6正常使用固定定位，那麼就需要為他寫一些Hacks。
固定定位元素的盒子位移屬性的使用和絕對定位的一樣。
保持前面盒子移位，可以看到盒子固定定位是相對於瀏覽器視窗而不是設定了相對定位的父元素。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>

.box {
  background: #8ec63f;
  height: 80px;
  position: fixed;
  width: 80px;}.box-1 {
  top: 6%;
  left: 2%;}.box-2 {
  top: 0;
  right: -40px;}.box-3 {
  bottom: -10px;
  right: 20px;}.box-4 {
  bottom: 0;}

效果

固定頁頭和頁尾

固定定位最常見的一種用途就是在頁面中建立一個固定頭部、或者腳部、或者固定頁面的一個側面。就算是使用者移動瀏覽器的滾動條，還是固定在頁面與使用者交流

下面的示例程式碼能實現。注意如何設定left和right兩個盒子位移，這使得“頁尾”跨越了頁面的整個寬度，而不需使用margin、border和padding來破壞盒模形就做了收縮自如。

< footer >Fixed Footer </footer>

footer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;}

2.2 z-index屬性

通常都認為Web頁面是二維頁面，顯示的元素都在X軸和Y軸上。當元素有定位時，有時候會放置在另一個元素的頂部。要改變這些元素是一個怎麼樣的層疊順序，要知道z軸，z軸是用z-index屬性來控制的。
一般來說，在DOM中，元素出現的時候就放置在z軸上。在DOM中，元素在頂部的要低於底部的。改變這種層疊順序可以直接使用z-index來控制。元素的z-index值越高將會出現在越上面，不管元素在DOM哪個位置上。
給元素設定z-index屬性，首先要在這個元素上設定了position屬性值為relatvie、absolute或者fixed之一。同樣的，要使用盒子位移屬性，也要先確認元素設定了positions屬性值為relative、absolute或者fixed之一。

在下面的例子中，如果每個盒子都不設定z-index，那麼第一個box在第二個下面，第二個在第三個下面，第三個在第四個下面。如果在盒子中指定z-index的值，第二個盒子在第一個和第三個上面，第三個盒子在第四個上面。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>

 .box-set {
  background: #e8eae9;
  height: 160px;
  position: relative;}
  .box {
  background: #8ec63f;
  border: 3px solid #f7941d;
  position: absolute;}
  .box-1 {
  left: 10px;
  top: 10px;}
  .box-2 {
  bottom: 10px;
  left: 70px;
  z-index: 3;}
  .box-3 {
  left: 130px;
  top: 10px;
  z-index: 2;}
  .box-4 {
  bottom: 10px;
  left: 190px;
  z-index: 1;}

不設定z-index效果

設定z-index效果

轉載於：http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning