認識CSS中佈局之文檔流、浮動、定位以及疊放次序

時間 2019-11-19

標籤認識 css 佈局文檔浮動定位以及次序欄目 CSS 简体版

原文原文鏈接

前端之HTML，CSS（七）

　　CSS

　　CSS佈局的核心就是盒子的擺放，即CSS定位。而CSS中定位機制分爲：普通流（nomal flow）、浮動（float）、定位（position）。css

　　普通流

　　普通流又被稱爲文檔流或者標準流，普通流是指網頁內標籤元素正常狀況下會按照自上而下，自左向右按順序排列。即塊級元素獨佔一行，多個塊級元素存在會自上而下順序排列，多個行內元素會共佔一行，自左向右排列。html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>普通流-測試</title>
 6     <style type="text/css">
 7         .div_one {
 8             width: 200px;
 9             height: 100px;
10             background-color: red;
11         }
12         .div_two {
13             width: 200px;
14             height: 100px;
15             background-color: green;
16         }
17         .div_three {
18             width: 200px;
19             height: 100px;
20             background-color: blue;
21         }
22         .span_one {
23             background-color: red;
24         }
25         .span_two {
26             background-color: green;
27         }
28         .span_three {
29             background-color: blue;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="div_one"></div>
35     <div class="div_two"></div>
36     <span class="span_one">123</span>
37     <span class="span_two">456</span>
38     <div class="div_three"></div>
39     <span class="span_three">789</span>
40 </body>
41 </html>

View Code

　　效果展現：前端

　　浮動

　　浮動是指網頁內的標籤元素脫離標準流的佈局方式，若是認爲標準流標籤元素是在網頁平面沿x,y軸佈局，則浮動就是增長一維，在z軸上實現佈局。能夠想象標準流佈局標籤元素座標爲（x,y,0），而浮動佈局標籤元素座標爲(x,y,z)，當x，y相同時，浮動元素會覆蓋標準流元素。瀏覽器

　　浮動的基本語法:選擇器 {float：屬性值}，屬性值有：left（元素向左浮動）、right（元素向右浮動）、none（元素不浮動），缺省默認爲none。ide

　　標準流佈局到浮動佈局佈局

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>普通流-測試</title>
 6     <style type="text/css">
 7         .div_one {
 8             width: 100px;
 9             height: 100px;
10             background-color: blue;  /*未設置浮動*/
11         }
12         .div_two {
13             width: 150px;
14             height: 150px;
15             background-color: green;  /*未設置浮動*/
16         }
17     </style>
18 </head>
19 <body>
20     <div class="div_one"></div>
21     <div class="div_two"></div>
22 </body>
23 </html>

View Code

　　效果：測試

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>浮動-測試</title>
 6     <style type="text/css">
 7         .div_one {
 8             width: 100px;
 9             height: 100px;
10             background-color: blue;  /*設置浮動*/
11             float: left;
12         }
13         .div_two {
14             width: 150px;
15             height: 150px;
16             background-color: green;  /*未設置浮動*/
17         }
18     </style>
19 </head>
20 <body>
21     <div class="div_one"></div>
22     <div class="div_two"></div>
23 </body>
24 </html>

View Code

　　效果：spa

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>浮動-測試</title>
 6     <style type="text/css">
 7         .div_one {
 8             width: 100px;
 9             height: 100px;
10             background-color: blue;  /*設置浮動*/
11             float: left;
12         }
13         .div_two {
14             width: 150px;
15             height: 150px;
16             background-color: green;  /*設置浮動*/
17             float: left;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="div_one"></div>
23     <div class="div_two"></div>
24 </body>
25 </html>

View Code

　　效果：設計

　　上述三個過程能夠看出從標準流到浮動的整個過程，第一步中，藍色和綠色方塊都沒有設置浮動，按照標準流佈局，兩個塊級元素各自獨佔一行，自上而下佈局。第二步中，爲藍色方塊設置浮動，藍色方塊向z軸浮起，不佔據x,y平面位置，綠色方塊自上而下佈局。第三步爲綠色方塊設置浮動，能夠看到塊元素徹底改變標準流佈局塊元素不獨佔一行。由於兩個塊元素設置均爲左浮動，故自左向右排序。3d

　　浮動的主要應用：多個塊元素於一行顯示。使用display:inline-block的缺點：盒子之間會出現間隙，沒法控制；盒子在一行內位置沒法調整，如：讓盒子自右向左排列。定義浮動的元素隱含着自動轉換爲行內塊元素的特性

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>浮動-測試</title>
 6     <style type="text/css">
 7         .div_one {
 8             width: 100px;
 9             height: 100px;
10             background-color: red;  /*設置浮動*/
11             float: left;
12         }
13         .div_two {
14             width: 100px;
15             height: 100px;
16             background-color: green;  /*設置浮動*/
17             float: left;
18         }
19         .div_three {
20             width: 100px;
21             height: 100px;
22             background-color: blue;  /*設置浮動*/
23             float: left;
24         }
25         .div_four {
26             width: 100px;
27             height: 100px;
28             background-color: pink;  /*設置浮動*/
29             float: right;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="div_one"></div>
35     <div class="div_two"></div>
36     <div class="div_three"></div>
37     <div class="div_four"></div>
38 </body>
39 </html>

View Code

　　浮動會影響標準流的位置變化，所以浮動元素一般結合父元素一塊兒佈局，並且浮動元素左右浮動不會佔據父元素盒子的內邊距。另外浮動元素只會影響在同一盒子中後續元素位置，不會影響以前元素的位置。

　　清除浮動：盒子嵌套時，由於子盒子內容不肯定不宜爲父盒子設定高度，而父盒子不設定高度時，當子盒子設定浮動時，子盒子不佔位置，因此父盒子高度又會變成0，影響後續盒子位置變化。所以，清除浮動的本質是：爲了解決父級元素由於子級元素浮動引發內部高度爲0的問題。

　　父盒子不設定高度，標準流狀況下，子盒子會撐開父盒子

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>清除浮動-測試</title>
 6     <style type="text/css">
 7         .up {
 8             width: 600px;
 9             border: 2px solid red;  /*父盒子不設定高度*/
10         }
11         .le {
12             width: 200px;
13             height: 200px;
14             background-color: blue;
15         }
16         .ri {
17             width: 300px;
18             height: 300px;
19             background-color: green;
20         }
21         .down {
22             width: 700px;
23             height: 100px;
24             background-color: black;
25         }
26     </style>
27 </head>
28 <body>
29     <div class="up">
30         <div class="le"></div>
31         <div class="ri"></div>
32     </div>
33     <div class="down"></div>
34 </body>
35 </html>

View Code

　　父盒子不設定高度，浮動狀況下，子盒子不佔位置，父盒子高度會變成0。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>清除浮動-測試</title>
 6     <style type="text/css">
 7         .up {
 8             width: 600px;
 9             border: 2px solid red;  /*父盒子不設定高度*/
10         }
11         .le {
12             width: 200px;
13             height: 200px;
14             background-color: blue;
15             float: left;  /*設定浮動*/
16         }
17         .ri {
18             width: 300px;
19             height: 300px;
20             background-color: green;
21             float: left;  /*設定浮動*/
22         }
23         .down {
24             width: 700px;
25             height: 100px;
26             background-color: black;
27         }
28     </style>
29 </head>
30 <body>
31     <div class="up">
32         <div class="le"></div>
33         <div class="ri"></div>
34     </div>
35     <div class="down"></div>
36 </body>
37 </html>

View Code

　　基本語法：選擇器 { clear：屬性值；}，其中屬性值有：left（清除左浮動影響）、right（清除右浮動影響）、both（清除左右浮動影響）。

　　清楚浮動的方法：

1.額外標籤法：在最後一個浮動元素後添加一個空元素，爲空元素設定清除浮動影響。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>清除浮動-測試</title>
 6     <style type="text/css">
 7         .up {
 8             width: 600px;
 9             border: 2px solid red;  /*父盒子不設定高度*/
10         }
11         .le {
12             width: 200px;
13             height: 200px;
14             background-color: blue;
15             float: left;  /*設定浮動*/
16         }
17         .ri {
18             width: 300px;
19             height: 300px;
20             background-color: green;
21             float: left;  /*設定浮動*/
22         }
23         .down {
24             width: 700px;
25             height: 100px;
26             background-color: black;
27         }
28         .clear {
29             clear: both;  /*設定清除浮動影響*/
30         }
31     </style>
32 </head>
33 <body>
34     <div class="up">
35         <div class="le"></div>
36         <div class="ri"></div>  <!-- 最後一個浮動元素 -->
37         <div class="clear"></div>  <!-- 添加空元素 -->
38     </div>
39     <div class="down"></div>
40 </body>
41 </html>

View Code

2.父級元素添加overflo屬性方法：爲父級元素添加overflow：屬性值；其中屬性值能夠爲hidden，auto，scroll中的一個，經過觸發BFC方式清除浮動。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>清除浮動-測試</title>
 6     <style type="text/css">
 7         .up {
 8             width: 600px;
 9             border: 2px solid red;  /*父盒子不設定高度*/
10             overflow: hidden;  /*爲父級元素添加overflow屬性*/
11         }
12         .le {
13             width: 200px;
14             height: 200px;
15             background-color: blue;
16             float: left;  /*設定浮動*/
17         }
18         .ri {
19             width: 300px;
20             height: 300px;
21             background-color: green;
22             float: left;  /*設定浮動*/
23         }
24         .down {
25             width: 700px;
26             height: 100px;
27             background-color: black;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="up">
33         <div class="le"></div>
34         <div class="ri"></div>  
35     </div>
36     <div class="down"></div>
37 </body>
38 </html>

View Code

3.使用after僞元素清除浮動方法：

在CSS中添加

 1 .clearfix:after {  /*添加after僞元素*/
 2             content: "";
 3             display: block;
 4             height: 0;
 5             clear: both;
 6             visibility: hidden;
 7 }
 8 .clearfix {
 9         *zoom: 1;  /*IE六、IE7專有*/
10 }

View Code

　　添加後在父元素中調用

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>清除浮動-測試</title>
 6     <style type="text/css">
 7         .clearfix:after {  /*添加after僞元素*/
 8             content: "";
 9             height: 0;
10             display: block;
11             visibility: hidden;
12             clear: both;
13         }
14         .clearfix {  /*IE六、IE7專有*/
15             *zoom: 1;
16         }
17         .up {
18             width: 600px;
19             border: 2px solid red;  /*父盒子不設定高度*/
20         }
21         .le {
22             width: 200px;
23             height: 200px;
24             background-color: blue;
25             float: left;  /*設定浮動*/
26         }
27         .ri {
28             width: 300px;
29             height: 300px;
30             background-color: green;
31             float: left;  /*設定浮動*/
32         }
33         .down {
34             width: 700px;
35             height: 100px;
36             background-color: black;
37         }
38     </style>
39 </head>
40 <body>
41     <div class="up clearfix">  <!-- 父元素中調用 -->
42         <div class="le"></div>
43         <div class="ri"></div>  
44     </div>
45     <div class="down"></div>
46 </body>
47 </html>

View Code

4.使用before和after雙僞元素清除浮動方法：

在CSS中添加

 1 .clearfix:before,.clearfix:after {  
 2             content: "";
 3             display: table; 
 4 }
 5 .clearfix:after {
 6     clear: both;
 7 }
 8 .clearfix {
 9     *zoom: 1; 
10 }

View Code

　　添加後在父元素中調用

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>清除浮動-測試</title>
 6     <style type="text/css">
 7         .clearfix:before,.clearfix:after {  /*添加before和after雙僞元素*/
 8             content: "";
 9             display: table;  /*觸發BFC清除浮動*/
10         }
11         .clearfix:after {
12             clear: both;
13         }
14         .clearfix {
15             *zoom: 1;  /*ie六、ie7專有*/
16         }
17         .up {
18             width: 600px;
19             border: 2px solid red;  /*父盒子不設定高度*/
20         }
21         .le {
22             width: 200px;
23             height: 200px;
24             background-color: blue;
25             float: left;  /*設定浮動*/
26         }
27         .ri {
28             width: 300px;
29             height: 300px;
30             background-color: green;
31             float: left;  /*設定浮動*/
32         }
33         .down {
34             width: 700px;
35             height: 100px;
36             background-color: black;
37         }
38     </style>
39 </head>
40 <body>
41     <div class="up clearfix">  
42         <div class="le"></div>
43         <div class="ri"></div>  
44     </div>
45     <div class="down"></div>
46 </body>
47 </html>

View Code

　　清除浮動影響效果展現

　　佈局流程

　　1.肯定頁面的可視區。可視區是指網頁主體內容的所在區域，通常在瀏覽器窗口水平居中顯示。通欄網頁可視區爲liu'la。

　　2.分析頁面中的行模塊，以及每一個行模塊中的列模塊

　　3.設計HTML結構

　　4.CSS初始化，運用盒子模型的原理經過CSS+DIV佈局控制每一個模塊的分佈和樣式。

　　常見網頁結構佈局

　　一列，固定寬度且居中型

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>常見網頁佈局結構-一列，固定寬度且居中型</title>
 6     <style type="text/css">
 7         .top,
 8         .banner,
 9         .main,
10         .footer {
11             width: 900px;
12             border: 1px dotted #ccc;
13             background-color: #eee;
14         }
15         .top {
16             height: 80px;
17             margin: 0 auto 5px;
18         }
19         .banner {
20             height: 100px;
21             margin: 0 auto 5px;
22         }
23         .main {
24             height: 400px;
25             margin: 0 auto 5px;
26         }
27         .footer {
28             height: 80px;    
29             margin: auto;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="top">top</div>
35     <div class="banner">banner</div>
36     <div class="main">main</div>
37     <div class="footer">footer</div>
38 </body>
39 </html>

View Code

　　兩列左右型

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>常見網頁佈局結構-兩列左右型</title>
 6     <style type="text/css">
 7         .top,
 8         .banner,
 9         .footer {
10             width: 900px;
11             border: 1px dashed #ccc;
12             background-color: #eee;
13         }
14         .left,
15         .right {
16             height: 400px;
17             border: 1px dashed #ccc;
18             background-color: #eee;
19         }
20         .top {
21             height: 80px;
22             margin: auto; 
23         }
24         .banner {
25             height: 100px;
26             margin: auto;
27             margin: 10px auto; 
28         }
29         .main {
30             width: 900px;
31             height: 400px;
32             margin: auto; 
33         }
34         .left {
35             width: 300px;
36             float: left;
37         }
38         .right {
39             width: 590px;
40             float: right;
41         }
42         .footer {
43             height: 80px;
44             margin: auto;
45             margin-top: 10px; 
46         }
47     </style>
48 </head>
49 <body>
50     <div class="top">top</div>
51     <div class="banner">banner</div>
52     <div class="main">
53         <div class="left">left</div>
54         <div class="right">right</div>
55     </div>
56     <div class="footer">footer</div>
57 </body>
58 </html>

View Code

　　通欄平均分佈型

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>常見網頁佈局結構-通欄型</title>
  6     <style type="text/css">
  7         .top {
  8             height: 80px;
  9             background-color: #ccc;
 10         }
 11         .top-inner {
 12             width: 900px;
 13             height: 80px;
 14             margin: auto;
 15         }
 16         .banner {
 17             width: 900px;
 18             height: 100px;
 19             background-color: #ccc;
 20             border: 1px dashed #eee;
 21             margin: 5px auto;
 22         }
 23         .up {
 24             width: 900px;
 25             height: 400px;
 26             margin: auto;
 27         }
 28         .left-top {
 29             width: 250px;
 30             height: 400px;
 31             background-color: #ccc;
 32             border: 1px dashed #eee;  /*252PX*/
 33             float: left;
 34         }
 35         .center-top {
 36             width: 384px;  /*1+250+1+5+1+384+1+5+1+250+1=900*/
 37             height: 400px;
 38             background-color: #ccc;
 39             border: 1px dashed #eee; 
 40             float: left;
 41             margin: 0 5px;  /*左右margin 10px*/
 42         }
 43         .right-top {
 44             width: 250px;
 45             height: 400px;
 46             background-color: #ccc;
 47             border: 1px dashed #eee;  /*252PX*/
 48             float: left;
 49         }
 50         .down {
 51             width: 900px;
 52             height: 600px;
 53             margin: 5px auto;
 54         }
 55         .left-bottom {
 56             width: 250px;
 57             height: 600px;
 58             background-color: #ccc;
 59             border: 1px dashed #eee;  /*252PX*/
 60             float: left;
 61         }
 62         .center-bottom {
 63             width: 384px;  /*1+250+1+5+1+384+1+5+1+250+1=900*/
 64             height: 600px;
 65             background-color: #ccc;
 66             border: 1px dashed #eee; 
 67             float: left;
 68             margin: 0 5px;  /*左右margin 10px*/
 69         }
 70         .right-bottom {
 71             width: 250px;
 72             height: 600px;
 73             background-color: #ccc;
 74             border: 1px dashed #eee;  /*252PX*/
 75             float: left;
 76         }
 77         .footer {
 78             height: 80px;
 79             background-color: #ccc;
 80         }
 81         .footer-inner {
 82             width: 900px;
 83             height: 80px;
 84             margin: auto;
 85         }
 86     </style>
 87 </head>
 88 <body>
 89     <div class="top">
 90         <div class="top-inner">top</div>
 91     </div>
 92     <div class="banner">banner</div>
 93     <div class="up">
 94         <div class="left-top">left-top</div>
 95         <div class="center-top">center-top</div>
 96         <div class="right-top">right-top</div>
 97     </div>
 98     <div class="down">
 99         <div class="left-bottom">left-bottom</div>
100         <div class="center-bottom">center-bottom</div>
101         <div class="right-bottom">right-bottom</div>
102     </div>
103     <div class="footer">
104         <div class="footer-inner">footer</div>
105     </div>
106 </body>
107 </html>

View Code

　　定位

　　定位同浮動同樣是脫離標準流的佈局方式，定位顧名思義就是按照盒子的位置隨意肯定盒子的位置，不像標準流和浮動通常有位置上的規則，徹底由設計者肯定。此外，經過定位能夠實現盒子的覆蓋，可是又不影響被覆蓋盒子的位置關係。

　　元素定位屬性主要包括定位模式和邊偏移兩個部分。

邊偏移

屬性	屬性值	描述
top	像素值	定義元素相對於父元素上邊線的距離
bottom	像素值	定義元素相對於父元素下邊線的距離
left	像素值	定義元素相對於父元素左邊線的距離
right	像素值	定義元素相對於父元素右邊線的距離

　　定位模式

CSS中position屬性用於定義元素的定位模式，基本語法：選擇器 {position：屬性值；}，其中position屬性值有：

屬性值	描述
static	靜態定位，遵循標準流定位，默認定位方式。
relative	相對定位，相對於標準流的位置定位
absolute	絕對定位，相對於上一個定位的父元素定位
fixed	固定定位，相對於瀏覽器窗口定位

　　標準流

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>定位-測試</title>
 6     <style type="text/css">
 7         .father {
 8             width: 400px;
 9             height: 400px;
10             border: 1px solid #000;
11         }
12         .normal {
13             width: 300px;
14             height: 300px;
15             background-color: red;
16         }    
17     </style>
18 </head>
19 <body>
20     <div class="father">
21         <div class="normal">標準流</div>
22     </div>
23 </body>
24 </html>

View Code

　　靜態定位（static）：全部元素默認的定位方式，即各個元素在標準流中的位置。靜態定位狀態下，沒法經過邊偏移屬性改變元素的位置。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>定位-測試</title>
 6     <style type="text/css">
 7         .father {
 8             width: 400px;
 9             height: 400px;
10             border: 1px solid #000;
11         }
12         .static {
13             width: 300px;
14             height: 300px;
15             background-color: green;
16             position: static;  /*靜態定位*/
17             top: 10px;  /*設置偏移上邊線10px*/
18         }
19     </style>
20 </head>
21 <body>
22     <div class="father">
23         <div class="static">靜態定位</div>
24 
25     </div>
26 </body>
27 </html>

View Code

　　相對定位（relative）：相對定位是相對於定位元素自身的本來位置，經過邊偏移屬性來移動位置，定位元素移動之後位置保留，後續元素的位置不會受到影響。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>定位-測試</title>
 6     <style type="text/css">
 7         .up {
 8             width: 100px;
 9             height: 100px;
10             background-color: blue;
11             position: relative;  /*相對定位*/
12             top: 50px;  /*移動至距離本來（標準流位置）上邊線50px的位置*/
13             left: 50px;  /*移動至距離（標準流位置）左邊線50px的位置*/
14         }
15         .down {
16             width: 100px;
17             height: 100px;
18             background-color: green;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="up"></div>
24     <div class="down"></div>
25 </body>
26 </html>

View Code

　　絕對定位（absolute）：絕對定位是相對於瀏覽器當前窗口或者定位父元素的位置，經過邊偏移屬性來移動位置，定位元素移動之後位置不保留，後續元素的位置像浮動同樣上浮。

　　後續元素受影響且無父元素（相對於瀏覽器當前窗口移動）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>定位-測試</title>
 6     <style type="text/css">
 7         .up {
 8             width: 100px;
 9             height: 100px;
10             background-color: blue;
11             position: absolute;  /*絕對定位*/
12             top: 20px;  /*無定位父元素，相對於瀏覽器當前窗口*/
13             left: 20px;
14         }
15         .down {
16             width: 150px;
17             height: 150px;
18             background-color: green;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="up"></div>
24     <div class="down"></div>
25 </body>
26 </html>

View Code

　　存在父元素，父元素無定位（相對於瀏覽器當前窗口移動）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>定位-測試</title>
 6     <style type="text/css">
 7         body {
 8             height: 2000px;
 9         }
10         .father {
11             width: 200px;
12             height: 200px;
13             background-color: red;
14             margin: 50px;
15         }
16         .son {
17             width: 100px;
18             height: 100px;
19             background-color: blue;
20             position: absolute;  /*絕對定位*/
21             top: 20px;  /*無定位父元素，相對於瀏覽器當前窗口*/
22             left: 20px;
23         }
24         .down {
25             width: 100px;
26             height: 100px;
27             background-color: green;
28             position: absolute;
29             right: 0;
30             bottom: 0;
31         }
32     </style>
33 </head>
34 <body>
35     <div class="father">
36         <div class="son"></div>
37     </div>
38     <div class="down"></div>
39 </body>
40 </html>

View Code

（如同存在滾動條，然而綠色元素塊沒有在瀏覽器下拉界面最下方，只是位於瀏覽器當前窗口）

　　存在「父輩」元素，「父輩」元素定位（相對於定位」父輩「元素）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>定位-測試</title>
 6     <style type="text/css">
 7         body {
 8             height: 2000px;
 9         }
10         .father {
11             width: 200px;
12             height: 200px;
13             background-color: red;
14             margin: 50px;
15         }
16         .son {
17             width: 100px;
18             height: 100px;
19             background-color: blue;
20             position: absolute;  /*絕對定位*/
21             top: 20px;  /*無定位父元素，相對於瀏覽器當前窗口*/
22             left: 20px;
23         }
24         .down {
25             width: 100px;
26             height: 100px;
27             background-color: green;
28             position: absolute;
29             right: 0;
30             bottom: 0;
31         }
32     </style>
33 </head>
34 <body>
35     <div class="father">
36         <div class="son"></div>
37     </div>
38     <div class="down"></div>
39 </body>
40 </html>

View Code

　　「子絕父相」：子元素使用絕對定位，父元素使用相對定位（推薦）。父元素相對定位保留位置，不影響後續元素位置，子元素絕對定位，相對於父元素定位實現位置移動。

　　定位盒子居中對齊問題：浮動或者定位的盒子，margin：0 auto；會失效。使得定位的盒子水平居中可使用：left：50%；margin-left：-width/2px；其中width爲盒子自身的寬度；使得定位的盒子垂直居中可使用：top：50%；margin-top：-height/2px；其中height爲盒子自身的高度。

　　固定定位（fixed）：固定定位是相對於瀏覽器當前窗口的位置，經過邊偏移屬性來移動位置，定位元素位置不保留，不隨瀏覽器滾動條滾動。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>定位-測試</title>
 6     <style type="text/css">
 7         body {
 8             height: 5000px;
 9         }
10         div {
11             width: 100px;
12             height: 100px;
13             background-color: red;
14             position: fixed;
15             right: 0;
16             top: 200px;
17         }
18     </style>
19 </head>
20 <body>
21     <div></div>
22 </body>
23 </html>

View Code

　　效果自行測試

　　注意：絕對定位、固定定位和浮動同樣都會將定位或者浮動元素轉換爲行內塊元素，行內塊元素不指定寬度會隨內容寬度顯示。此外，插入圖片能夠撐開盒子，而背景圖片不會影響盒子大小。

　　層疊次序

　　層疊即覆蓋，前面提到設置盒子佈局中存在覆蓋的有浮動、絕對定位以及固定定位三種狀況。

　　浮動：浮動存在覆蓋的情形只存在前一個盒子設定浮動，不佔據文檔位置，後面未設定浮動盒子位置會上浮，表現爲後面盒子被前面盒子覆蓋的狀況。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>層疊次序-測試</title>
 6     <style type="text/css">
 7         .up {
 8             width: 200px;
 9             height: 200px;
10             background-color: red;  
11             float: left;  /*前面盒子設置浮動*/
12         }
13         .down {  /*後面盒子不設置浮動*/
14             width: 300px;
15             height: 300px;  
16             background-color: blue;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="up"></div>
22     <div class="down"></div>
23 </body>
24 </html>

View Code

　　效果

　　浮動先後盒子都設置浮動不會存在盒子覆蓋情況，而是盒子會在同一行顯示。

　　絕對定位：絕對定位存在覆蓋有三種情形：先後盒子分別設定：絕對定位和絕對定位，絕對定位和浮動，絕對定位和文檔流（不設置浮動或者絕對定位）。

　　絕對定位和文檔流：這種情形只存在前一個盒子設置絕對定位，不佔據文檔位置，後面未設定絕對定位盒子位置上浮，表現爲後面盒子被前面盒子覆蓋的狀況。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>層疊次序-測試</title>
 6     <style type="text/css">
 7         .up {
 8             width: 200px;
 9             height: 200px;
10             background-color: red;  
11             position: absolute;  /*前面盒子設置絕對定位*/
12         }
13         .down {  /*後面盒子不設置絕對定位*/
14             width: 300px;
15             height: 300px;  
16             background-color: blue;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="up"></div>
22     <div class="down"></div>
23 </body>
24 </html>

View Code

　　效果

　　絕對定位和浮動：先後兩個盒子分別設定浮動和絕對定位，如：前浮後絕，前絕後浮。設置絕對定位的盒子必定會覆蓋設置定位的盒子，無關先後。

　　前浮後絕

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>層疊次序-測試</title>
 6     <style type="text/css">
 7         .up {  /*前面盒子設置浮動*/
 8             width: 200px;
 9             height: 200px;
10             background-color: red;  
11             float: left;  
12         }
13         .down {  /*後面盒子設置絕對定位*/
14             width: 300px;
15             height: 300px;  
16             background-color: blue;
17             position: absolute;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="up"></div>
23     <div class="down"></div>
24 </body>
25 </html>

View Code

　　效果

　　前絕後浮

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>層疊次序-測試</title>
 6     <style type="text/css">
 7         .up {  /*前面盒子設置絕對定位*/
 8             width: 200px;
 9             height: 200px;
10             background-color: red;  
11             position: absolute;  
12         }
13         .down {  /*後面盒子設置浮動*/
14             width: 300px;
15             height: 300px;  
16             background-color: blue;
17             float: left;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="up"></div>
23     <div class="down"></div>
24 </body>
25 </html>

View Code

　　效果

　　絕對定位與絕對定位：前、後盒子都設置絕對定位，後面設置絕對定位的盒子會覆蓋前面設置絕對定位的盒子。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>層疊次序-測試</title>
 6     <style type="text/css">
 7         .up {  /*前面盒子設置絕對定位*/
 8             width: 200px;
 9             height: 200px;
10             background-color: red;  
11             position: absolute;  
12         }
13         .down {  /*後面盒子設置絕對定位*/
14             width: 300px;
15             height: 300px;  
16             background-color: blue;
17             position: absolute;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="up"></div>
23     <div class="down"></div>
24 </body>
25 </html>

View Code

　　效果

　　對於定位中致使的元素重疊問題，能夠對定位元素應用z-index屬性設置層疊順序，屬性值能夠爲0或者正、負整數。0爲z-index屬性的默認屬性值，取值越大，定位元素在層疊順序中越居上，即z-index：1；會覆蓋z-index：2；的盒子。注意：z-index屬性只在應用於定位元素，對於標準流（靜態定位至關於標準流）、浮動元素無做用。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>層疊次序-測試</title>
 6     <style type="text/css">
 7         .up {  /*前面盒子設置絕對定位*/
 8             width: 200px;
 9             height: 200px;
10             background-color: red;  
11             position: absolute;  
12             z-index: 1;   /*調高層疊等級爲1*/
13         }
14         .down {  /*後面盒子設置絕對定位*/
15             width: 300px;
16             height: 300px;  
17             background-color: blue;
18             position: absolute;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="up"></div>
24     <div class="down"></div>
25 </body>
26 </html>