一. 定位介绍
谈到定位，顾名思义，就确定元素的位置，定位分为三种：相对定位、绝对定位、固定定位；分别用 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>
