一、定位的基本概念
在我們?yōu)g覽網(wǎng)頁的過程中，經(jīng)常會發(fā)現(xiàn)網(wǎng)頁中的元素重疊展示，例如一個列表壓在了一張圖片之上，或者瀏覽器右下角突然彈出的廣告壓到了其他元素之上，這些都需要使用css的定位才能實現(xiàn)，本節(jié)我們就講解css定位相關(guān)的屬性，定位可以分為三類:
絕對定位
相對定位
固定定位
二、css定位詳解
我們可以通過position屬性，將一個元素設(shè)置成定位元素，之后就可以通過top、left、bottom、right屬性來設(shè)置元素的坐標。
絕對定位
將一個元素設(shè)置下面的屬性：
1element{2? ? position:absolute;3}
元素就變成了一個絕對定位元素，實例代碼如下所示。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7? ? ? ? .box{ 8? ? ? ? ? ? width:100px; 9? ? ? ? ? ? height:100px;10? ? ? ? ? ? background-color: #f00;11? ? ? ? ? ? border:1px solid #0f0;12}13? ? ? ? .pos{14? ? ? ? ? ? position: absolute;/*設(shè)置絕對定位元素*/15? ? ? ? ? ? top:50px;16? ? ? ? ? ? left:50px;17}18</style>19</head>20<body>21<!-- 一個元素可以設(shè)置多個class屬性，用空格區(qū)分開 -->22<div class="box">1</div>23<div class="box pos">2</div>24<div class="box">3</div>25</body>26</html>
從上面代碼的效果中，我們可以了解以下幾點：
絕對定位元素脫離文檔流，并不占位，第一個div和第三個div相鄰。
原點在整個網(wǎng)頁左上角的位置。
定位的坐標分別是top:50px;left:50px;這個值是元素左上角距離原定的距離。
相對定位
將一個元素設(shè)置下面的屬性：
1element{2? ? position:relative;3}
元素就變成了一個相對定位元素，實例代碼如下所示。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7? ? ? ? .box{ 8? ? ? ? ? ? width:100px; 9? ? ? ? ? ? height:100px;10? ? ? ? ? ? background-color: #f00;11? ? ? ? ? ? border:1px solid #0f0;12}13? ? ? ? .pos{14? ? ? ? ? ? position: relative;/*設(shè)置相對定位元素*/15? ? ? ? ? ? top:50px;16? ? ? ? ? ? left:50px;17}18</style>19</head>20<body>21<div class="box">1</div>22<div class="box pos">2</div>23<div class="box">3</div>24</body>25</html>
從上面代碼的效果中，我們可以了解以下幾點：
相對定位元素不脫離文檔流，元素占位，第一個div和第三個div不相鄰，中間的間距就是相對定位元素的位置。
原點在其占位位置的左上角。
定位的坐標分別是top:50px;left:50px;這個值是元素左上角距離原定的距離。
固定定位
將一個元素設(shè)置下面的屬性：
1element{2? ? position:fixed;3}
元素就變成了一個固定定位元素，實例代碼如下所示。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7? ? ? ? body{ 8? ? ? ? ? ? height:1000px; 9}10? ? ? ? .box{11? ? ? ? ? ? width:100px;12? ? ? ? ? ? height:100px;13? ? ? ? ? ? background-color: #f00;14? ? ? ? ? ? border:1px solid #0f0;15}16? ? ? ? .box2{17? ? ? ? ? ? position: fixed;/*設(shè)置固定定位元素*/18? ? ? ? ? ? top:50px;19? ? ? ? ? ? left:50px;20}21</style>22</head>23<body>24<div class="box box1">1</div>25<div class="box box2">2</div>26<div class="box box3">3</div>27</body>28</html>
從上面代碼的效果中，我們可以了解以下幾點：
固定定位元素脫離文檔流，并不占位，第一個div和第三個div相鄰。
我們將body元素的高度設(shè)置成1000px，這樣我們就可以通過滾輪控制網(wǎng)頁顯示的位置。
原點在瀏覽器當(dāng)前窗口的左上角。
定位的坐標分別是top:50px;left:50px;這個值是元素左上角距離原定的距離。
當(dāng)混輪滾動的時候，固定定位元素永遠相對于窗戶的位置定位。
設(shè)置參照物
理解了上面三種定位方法，我們再來考慮開始提到的那個問題，如果我們希望將一個數(shù)字列表壓在一張圖片之上。居中顯示在網(wǎng)頁之上，我們將數(shù)字列表設(shè)置定位之后，坐標應(yīng)該設(shè)置成多少呢？因為居中的圖片與瀏覽器窗口的左邊距是不固定的，所以沒有辦法設(shè)置成一個固定值，這個時候，我們就需要給定位元素設(shè)置參照物。
將父級元素設(shè)置定位元素，那么子級元素定位的坐標原點會設(shè)置為父級元素左上角的位置。代碼如下所示。
1<div class="container">2<div class="box"></div>3</div>
1 .container{ 2? ? width:300px; 3? ? height:300px; 4? ? border:1px solid blue; 5? ? position: relative;; 6? ? top:100px; 7? ? left:100px; 8} 9.box{10? ? border:blue 4px solid;11? ? width:100px;12? ? height:100px;13? ? position:absolute;14? ? top:10px;15? ? left:20px;16}
父級容器不管是絕對定位，相對定位還是固定定位，都可以實現(xiàn)作為參照物的效果，在實際項目開發(fā)中，常用方法如下所示：
如果父級元素不脫離文檔流，參與正常排版，那么父級設(shè)置相對定位。
如果父級需要根據(jù)視窗的顯示位置而變化位置，可以設(shè)置固定定位。
一般父級容器不設(shè)置絕對定位。
注意事項
大家掌握了定位之后會發(fā)現(xiàn)一個問題，那就是只要我么使用定位，就可以實現(xiàn)所有的網(wǎng)頁效果，再也不需要浮動布局，也不用管網(wǎng)頁的樹狀結(jié)構(gòu)了。
這樣做其實是不可以的，在制作網(wǎng)頁的過程中，我們不僅要將元素放在指定的位置，還要考慮網(wǎng)頁的后續(xù)可維護性，已經(jīng)針對不同屏幕尺寸的適應(yīng)能力。因此，定位是我們實現(xiàn)網(wǎng)頁布局的最后手段。多于一個新手來說，能不用定位來實現(xiàn)的布局，都不要用定位來實現(xiàn)。
三、課后練習(xí)
完成融職教育右側(cè)返回頂部的懸浮效果。
制作一個在圖片上顯示圖標描述文字的效果，并且圖片再網(wǎng)頁右下角顯示。
制作一個標題效果，讓標題左右兩邊各帶一個橫線（使用偽元素和定位來實現(xiàn)）。
