上面我們一起研究了浮動布局的特點和如何清除浮動給布局帶來的不良影響，今天我們繼續來研究定位流布局的特點和一些常用的布局技巧。
定位流主要有三種，一是相對定位，二是絕對定位，三是固定定位；下面我們一一進行分析。
相對定位
相對定位就是相對於自己以前在標准流中的位置來移動；
寫法：
position: relative;
示例程序：
<style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; } .box1{ background-color: red; } .box2{ background-color: green; position: relative; top: 20px; left: 20px; } .box3{ background-color: blue; } <style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
ps：
-
- 在相對定位中同一個方向上的定位屬性只能使用一個相對定位是不脫離標准流的, 會繼續在標准流中占用一份空間
- top/bottom 只能用一個
- left/right 只
能用一個
- 在相對定位中同一個方向上的定位屬性只能使用一個相對定位是不脫離標准流的, 會繼續在標准流中占用一份空間
-
- 由於相對定位是不脫離標准流的, 所以在相對定位中區分塊級元素/行內元素/行內塊級元素
- 由於相對定位是不脫離標准流的, 並且相對定位的元素會占用標准流中的位置, 所以當給相對定位的元素設置margin/padding等屬性的時會影響到標准流的布局，如下圖：
相對定位一般用於盒子位置的微調：
input{
width: 200px;
height: 50px;
}
img{
width: 100px;
height: 50px;
position: relative;
top: 20px;
}
跟后面學習的絕對定位配合使用，下面再詳細了解。
絕對定位
絕對定位就是相對於body或者某個定位流中的祖先元素來定位。
寫法：
position: absolute;- 這是定位前的樣子：
示例代碼：
-
<style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; } .box1{ background-color: red; } .box2{ background-color: green; position: absolute; left: 0; top: 0; } .box3{ background-color: blue; } </style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
定位后的樣子：
-
分析定位前后的變化，我們可以得出以下幾點結論： -
- 絕對定位的元素是脫離標准流的, 不會占用標准流中的位置
- 由於絕對定位的元素是脫離標准流的, 所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素
- 如果一個絕對定位的元素是以body作為參考點, 那么其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點
- 相對於body定位會隨着頁面的滾動而滾動
- 一個絕對定位的元素會忽略祖先元素的padding，例如：
<style> *{ margin: 0; padding: 0; } .box1{ width: 300px; height: 300px; background-color: red; border: 10px solid #000; padding: 30px; position: relative; box-sizing: border-box; } .box2{ width: 100px; height: 100px; background-color: green; position: absolute; left: 0; top: 0; } </style> <div class="box1"> <div class="box2"></div> </div>
那么，絕對定位到底是相對於誰來定位呢？我們來仔細研究一下：
-
- 默認情況下所有的絕對定位的元素, 無論有沒有祖先元素, 都會以body作為參考點
- 如果一個絕對定位的元素有祖先元素, 並且祖先元素中有一個是定位流中的元素, 那么這個絕對定位的元素就會以定位流的那個祖先元素作為參考點
- 如果一個絕對定位的元素有祖先元素, 並且祖先元素中有多個是定位流中的元素, 那么這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點
示例代碼：
<style> *{ margin: 0; padding: 0; } .box1{ width: 300px; height: 300px; background-color: red; position: relative; } .box2{ width: 200px; height: 200px; background-color: green; } .box3{ width: 100px; height: 100px; background-color: blue; position: absolute; left: 0; bottom: 0; } </style> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div>
效果圖：
絕對定位大多配合相對定位來使用，一般不會單獨出現。
固定定位
固定定位可以讓某個盒子不隨着滾動條的滾動而滾動。
寫法：
position: fixed;- 示例代碼：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>74-固定定位</title> <style> *{ margin: 0; padding: 0; } p{ width: 100px; } a{ width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.3); border-radius: 25px; text-decoration: none; text-align: center; color: #000; position: fixed; right: 10px; bottom: 10px; } </style> </head> <body> <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p> <a href="#">^<br>頂部</a> </body> </html>
示例圖片：
ps：
- 固定定位的元素是脫離標准流的, 不會占用標准流中的位置
- 由於固定定位的元素是脫離標准流的, 所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素
固定定位應用場景:
-
- 網頁對聯廣告
- 網頁頭部通欄(穿透效果)
- 回到頂部按鈕
子絕父相
前面說過相對定位和絕對定位都是一起出現, 很少單獨使用。
那么為什么要這樣呢，先看示例的代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>71-子絕父相</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 ul{ 12 width: 800px; 13 height: 50px; 14 background-color: red; 15 list-style: none; 16 margin: 0px auto; 17 margin-top: 100px; 18 } 19 li{ 20 width: 100px; 21 /*height: 50px;*/ 22 line-height: 50px; 23 float: left; 24 background-color: gray; 25 text-align: center; 26 } 27 .li03{ 28 background-color: darkgray; 29 position: relative; 30 } 31 ul li img{ 32 /* 33 缺點以前的位置仍然被占用, 不能讓文字居中對齊 34 */ 35 /*position: relative; 36 left: -35px; 37 top: -15px;*/ 38 /* 瀏覽器調整之后位置會發生變化*/ 39 /* position: absolute; 40 top: 95px; 41 left: 535px;*/ 42 position: absolute; 43 left: 37px; 44 top: -5px; 45 } 46 </style> 47 </head> 48 <body> 49 <ul> 50 <li>服裝城</li> 51 <li>美妝館</li> 52 <li>京東超市</li> 53 <li class="li03">全球購<img src="hot.png" alt=""></li> 54 <li>閃購</li> 55 <li>團購</li> 56 <li>拍賣</li> 57 <li>江哥</li> 58 </ul> 59 </body> 60 </html>
相對定位：
絕對定位：
子絕父相：
ps：
- 相對定位和絕對定位一般都是用來做覆蓋效果的, 當看到某個元素覆蓋在另外一個元素上時, 第一時間就要想到定位流。
- 例如一下效果：
是不是要收廣告費，哈哈哈。到這里就結束啦，下周見。