第八节 定位
一. 定位介紹
談到定位，顧名思義，就確定元素的位置，定位分為三種：相對定位、絕對定位、固定定位；分別用 position：relative、position：absolute、position：fixed來表示，它們分別有著不同的用法和使用場景，比如：相對定位通常用來微調元素的位置，用來做字絕父相的父親；絕對定位用來配合元素動畫的移動，用來做子絕父相的兒子；固定定位通常用來做固定在屏幕某處的案例（固定導航欄、返回頂部按鈕等）。
子絕父相：如果要對一個子元素使用定位，那么應該是子元素是絕對定位，它的父元素為相對定位。讓子元素 以其父元素為標準來定位。如果不這么做，子元素就會相對body或瀏覽器定位產生不好的效果。
二. 相對定位
1.含義： 相對于自己的位置進行移動。?可以簡單概括為：不脫標（不脫離標準文檔流），老家留坑，形影分離。
?
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 * {8 margin: 0;9 padding: 0; 10 } 11 .box1 { 12 width: 100px; 13 height: 100px; 14 border: 1px solid black; 15 background-color: red; 16 } 17 18 .box2 { 19 width: 100px; 20 height: 100px; 21 border: 1px solid black; 22 background-color: green; 23 position: relative; 24 top: 200px; 25 left: 400px; 26 } 27 .box3 { 28 width: 100px; 29 height: 100px; 30 border: 1px solid black; 31 background-color: blue; 32 } 33 </style> 34 </head> 35 <body> 36 <!--一.相對定位 :不脫標，老家留坑，形影分離--> 37 <div class="box1"></div> 38 <div class="box2"></div> 39 <div class="box3"></div> 40 </body> 41 </html>? ?效果：
? ?
2.用于元素位置的微調
?
?
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 .box4{8 width: 100px;9 height: 200px; 10 border: 1px solid black; 11 float: left; 12 } 13 body input{ 14 position: relative; 15 top: 100px; 16 left: 50px; 17 } 18 </style> 19 </head> 20 <body> 21 <!--一.元素的微調--> 22 <div class="box4"></div> 23 <input type="button" value="來微調我呀" /> 24 </body> 25 </html>?
效果：
3.子絕父相的長輩，不一定是父輩（詳見下面絕對定位的介紹）
?
三. 絕對定位?
1.性質：絕對定位是脫標的，所以只要元素進行絕對定位了，無論是行內元素還是塊級元素，都可以設置寬高了，不需要再設置display:block了。???????
?
1 <!DOCTYPE html>2 <html>3 4 <head>5 <meta charset="UTF-8">6 <title></title>7 <style type="text/css">8 * {9 margin: 0; 10 padding: 0; 11 } 12 13 .box1 { 14 width: 200px; 15 height: 200px; 16 border: 1px solid pink; 17 background-color: red; 18 } 19 20 .box2 { 21 width: 200px; 22 height: 200px; 23 border: 1px solid pink; 24 background-color: green; 25 position: absolute; 26 top: 200px; 27 left: 300px; 28 } 29 30 .box3 { 31 width: 200px; 32 height: 200px; 33 border: 1px solid pink; 34 background-color: blue; 35 } 36 37 .sp1 { 38 border: 1px solid black; 39 width: 200px; 40 height: 200px; 41 } 42 43 .sp2 { 44 border: 1px solid black; 45 width: 200px; 46 height: 200px; 47 position: absolute; 48 top: 100px; 49 left: 100px; 50 } 51 </style> 52 </head> 53 <body> 54 <!--一.絕對定位的盒子脫標1--> 55 <div class="box1">1</div> 56 <div class="box2">2</div> 57 <div class="box3">3</div> 58 <!--二.絕對定位的盒子脫標2--> 59 <span class="sp1">哈哈1</span> 60 <!--絕對定位以后，就可以設置寬和高了--> 61 <span class="sp2">哈哈2</span> 62 </body> 63 64 </html>2.絕對定位參考點1-當沒有父盒子或父盒子中沒有定位屬性時，這時以body作為參考點
???經典面試題：
?
3.絕對定位參考點2-子絕父相
? ?一個絕對定位的元素，在有父元素或爺爺或以上元素包裹時，以離他最近的有定位（相對、絕對、固定）的元素當做參考。
?
? ?
?
?
??4.居中的性質
絕對定位以后，標準文檔流中的居中方式：margin：0 auto ,失效了，所有要采用一個新的公式：left:50%， margin-left: 負的寬度的一半。
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 .box1 {8 width: 400px;9 height: 60px; 10 background-color: green; 11 position: absolute; 12 left: 50%; 13 top: 0; 14 margin-left: -200px; 15 } 16 </style> 17 </head> 18 <body> 19 <!--絕對定位以后，標準文檔流中的居中方式：margin：0 auto ,失效了 20 所有要采用一個新的公式：left:50% margin-left: 負的寬度的一半--> 21 <div class="box1"></div> 22 </body> 23 24 </html>四. 固定定位?
固定定位是相對瀏覽器窗口進行定位，無論窗口怎么移動，固定定位的盒子相對于窗口的位置都不變.
? ???1.?補充固定導航欄案例js版
1 <!DOCTYPE html>2 <html>3 4 <head>5 <meta charset="UTF-8">6 <title></title>7 <style>8 * {9 margin: 0; 10 padding: 0 11 } 12 13 img { 14 vertical-align: top; 15 } 16 17 .main { 18 margin: 0 auto; 19 width: 1000px; 20 margin-top: 10px; 21 } 22 23 .fixed { 24 position: fixed; 25 top: 0; 26 left: 0; 27 } 28 </style> 29 <script src="00-JS/myJs.js" type="text/javascript" charset="utf-8"></script> 30 <script type="text/javascript"> 31 window.onload = function() { 32 var nav = $('Q-nav'); 33 var navTop = nav.offsetTop; 34 window.onscroll = function() { 35 if(Scroll().top >= navTop) { 36 nav.className = "nav fixed"; 37 } else { 38 nav.className = "nav"; 39 } 40 }; 41 }; 42 </script> 43 </head> 44 <body> 45 <div class="top" id="top"> 46 <img src="00-Image/top.png" alt="" /> 47 </div> 48 <div class="nav" id="Q-nav"> 49 <img src="00-Image/nav.png" alt="" /> 50 </div> 51 <div class="main"> 52 <img src="00-Image/main.png" alt="" /> 53 </div> 54 </body> 55 56 </html>? ? ?2. 回到頂部案例JQuery版
1 <!DOCTYPE html>2 <html>3 4 <head>5 <meta charset="UTF-8">6 <title></title>7 <style type="text/css">8 #div1 {9 height: 2000px; 10 } 11 12 .box1 { 13 width: 50px; 14 height: 50px; 15 background-color: pink; 16 position: fixed; 17 bottom: 20px; 18 right: 20px; 19 cursor: pointer; 20 display: none; 21 } 22 </style> 23 <script src="../../00-Lib/jquery-1.11.1.min.js"></script> 24 <script type="text/javascript"> 25 $(function() { 26 //1.滾動事件 27 $(window).on('scroll', function() { 28 var myTop = $(document).scrollTop(); 29 if(myTop > 0) { 30 $('.box1').show(); 31 } else { 32 $('.box1').hide(); 33 } 34 }); 35 //2.回到頂部事件 36 $('.box1').on('click',function () { 37 $(document).scrollTop(0); 38 }); 39 }); 40 </script> 41 </head> 42 43 <body> 44 <div id="div1"> 45 hahah 46 </div> 47 <div class="box1"> 48 </div> 49 </body> 50 51 </html>?五. Z-Index??
●?z-index值表示誰壓著誰。數值大的壓蓋住數值小的。
? ?● 只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕對定位、固定定位，都可以使用z-index值。而浮動的東西不能用。
? ?● z-index值沒有單位，就是一個正整數。默認的z-index值是0。
? ?● 如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰就能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 .box1 {8 width: 200px;9 height: 200px; 10 background-color: pink; 11 position: absolute; 12 top: 400px; 13 left: 200px; 14 z-index: 10; 15 } 16 17 .box2 { 18 width: 200px; 19 height: 200px; 20 background-color: greenyellow; 21 position: absolute; 22 top: 420px; 23 left: 250px; 24 z-index: 9; 25 } 26 </style> 27 </head> 28 <body> 29 <!--● z-index值表示誰壓著誰。數值大的壓蓋住數值小的。 30 ● 只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕對定位、固定定位，都可以使用z-index值。而浮動的東西不能用。 31 ● z-index值沒有單位，就是一個正整數。默認的z-index值是0。 32 ● 如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰就能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。--> 33 34 <div class="box1"></div> 35 <div class="box2"></div> 36 </body> 37 38 </html>? ??z-index的從父現象：父親之間pk，a的父親比b的父親的z-index大，那么b的z-index比a大無效
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">3 <head>4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">5 <title>Document</title>6 <style type="text/css">7 *{8 margin: 0;9 padding: 0; 10 } 11 .linzhiying{ 12 width: 200px; 13 height: 200px; 14 background-color: blue; 15 position: relative; 16 z-index: 10; 17 } 18 .tianliang{ 19 width: 200px; 20 height: 200px; 21 background-color: orange; 22 position: relative; 23 z-index: 9; 24 } 25 .kimi{ 26 width: 60px; 27 height: 60px; 28 background-color: green; 29 position: absolute; 30 top: 300px; 31 left: 450px; 32 z-index: 454; 33 } 34 .cindy{ 35 width: 60px; 36 height: 60px; 37 background-color: pink; 38 position: absolute; 39 top: 130px; 40 left: 490px; 41 z-index: 45454; 42 } 43 </style> 44 </head> 45 <body> 46 <!--z-index的從父現象：父親之間pk，a的父親比b的父親的z-index大，那么b的z-index比a大無效--> 47 <div class="linzhiying"> 48 <p class="kimi"></p> 49 </div> 50 <div class="tianliang"> 51 <p class="cindy"></p> 52 </div> 53 </body> 54 </html>?
總結
- 上一篇： 奸商骗人不眨眼 教你1分钟选对显示器
- 下一篇： 国区App Store再现山寨《艾尔登法