A. Positioning Introduction
Turning positioning, by definition, to determine the position of the element, the positioning of three kinds: relative position, absolute positioning, fixed positioning; respectively position: relative, position: absolute, position: fixed represented, respectively, have different uses and usage scenarios, such as: the relative positioning position is usually used to fine-tune the elements, the word for father absolutely parent phase; absolute positioning is used to move elements with animation, used to make the son of the father the child must phase; fixed positioning is often used to do fixed somewhere in the screen case (fixed navigation bars, buttons, etc. Back to top).
Parent with child Jedi: If you want to locate a child element, then it should be a child element is absolutely positioned, its parent element for the relative positioning. Let the child element to its parent element as a standard to locate. If you do not, the child element will be relatively body or browser have a bad effect .
II. Relative positioning
1. Meaning: moves relative to their position. Can be summarized as: no mark off (without departing from the standard normal flow ), leaving home pits, separated overwhelmed.
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;
Color-background 22 is: Green;
Position 23 is: relative;
24 Top: 200px;
25 left: 400px;
26 is}
27 {.box3
28 width: 100px;
29 height: 100px;
30 border: 1px Solid Black;
31 is background-Color: Blue;
32}
33 is </ style>
34 is </ head>
35 <body>
36 <- a relative positioning:!. not marked off, leaving home pits, separated overwhelmed ->
37 [<div class = "box1"> </ div>
38 is <div = class "BOX2"> </ div>
39 <div class = "BOX3"> </ div>
40 </ body>
41 is </ HTML>
effect:
2. fine-tune the position of the element
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 <!--一.Fine-tuning elements ->
22 <div class="box4"></div>
23 <input type="button" value="来微调我呀" />
24 </body>
25 </html>
effect:
3. elder son absolute phase of the parent, not necessarily the parents (see below absolute positioning presentation)
III. Absolute positioning
1. Properties: Absolute positioning is off target, so long as the absolute positioning of the elements, either inline elements or block elements, width and height can be set up, does not need to set the display: block up.
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>
