一、css定位：position:
1.相对定位：relative
如果仅仅对当前盒子设置相对定位，那么它与原来的盒子没有任何变化
只有一个作用：父相子绝的参考 不要使用相对定位做压盖现象
参考点：以原来的位置为参考点
两种现象：1.不脱标 2.形影分离老家留坑（恶心）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css" media="screen">
6
7 div{
8 200px;
9 height: 200px;
10
11 }
12 .box1{
13 background-color: red;
14 }
15 .box2{
16 background-color: green;
17 position: relative;
18 /*top: 200px;*/
19 left: 0px;
20 }
21 .box3{
22 background-color: blue;
23 }
24
25 </style>
26 </head>
27 <body>
28
29 <div class="box1">
30
31 </div>
32 <div class="box2">
33
34 </div>
35 <div class="box3">
36
37 </div>
38
39 </body>
40 </html>
相对定位
2.绝对定位： absolute 做压盖现象
现象：1.设置绝对定位的盒子，脱离标准流
参考点：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（一直在显示的左上角;跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。（爱立信）
二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
绝对定位的盒子无视父亲的padding
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css" media="screen">
6 *{
7 padding: 0;
8 margin: 0;
9 }
10
11 .father{
12 500px;
13 height: 500px;
14 background-color: green;
15 position: relative;
16 top: 50px;
17 left: 100px;
18
19 }
20 .father2{
21 300px;
22 height: 300px;
23 background-color: yellow;
24 margin-left: 30px;
25 position: relative;
26 padding: 30px;
27
28 }
29 .box1{
30 200px;
31 height: 200px;
32 background-color: red;
33 position: absolute;
34 top: 30px;
35 left: 40px;
36 }
37
38 </style>
39 </head>
40 <body style="height: 2000px">
41
42 <div class="father">
43 <div class="father2">
44
45
46 <div class="box1">
47
48 </div>
49 </div>
50
51 </div>
52
53 </body>
54 </html>
绝对定位
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中
父相子绝的案例03：左右调即可！！父相子绝常用！
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css" media="screen">
6 *{
7 padding: 0;
8 margin: 0;
9 }
10 input,button{
11 outline: none;
12 border: 0;
13 }
14 .search{
15 296px;
16 height: 48px;
17 margin: 200px auto;
18
19 }
20 .search form{
21 position: relative;
22 }
23 .search input[type='text']{
24 223px;
25 height: 48px;
26 font-size: 14px;
27 border: 1px solid #e0e0e0;
28 padding: 0 5px;
29 position: absolute;
30 }
31 .search span{
32 font-size: 12px;
33 background-color: #eee;
34 padding: 0 5px;
35 position: absolute;
36 top: 0;
37 right: 0;
38 }
39 .search span.t{
40 top: 20px;
41 right: 162px;
42 z-index: 2;
43 }
44 .search span.s{
45 top: 20px;
46 right: 82px;
47 z-index: 1;
48 }
49 .search input[type='submit']{
50 height: 48px;
51 50px;
52 border: 1px solid #e0e0e0;
53 background: #fff;
54 position: absolute;
55 right: 12px;
56 top: 0px;
57 }
58
59 </style>
60 </head>
61 <body>
62 <div class="search">
63 <form>
64
65 <input type="text" name=""><input type="submit" value="按钮">
66 <span class="t">小米8</span>
67 <span class="s">小米MIX 2S</span>
68
69 </form>
70 </div>
71
72
73 </body>
74 </html>
父相子绝-小米搜索例子
copy别人的代码：找到模板，1.查看源代码，复制到html中；2.在sources里复制粘贴（save as 或选择图片save）到自己的目录下即可！趴网站！ok
3.固定定位：fixed
现象：1，脱标
参考点：浏览器左上角(滚动时就看不见了)
例子08！要写top，left都设为0 给body设padding-top z-index设置大（下去再上来，上为了保证第二栏相对于导航栏固定，覆盖了没关系！）
导航栏，回到顶部，设置时间返回顶部
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <meta charset="UTF-8">
6 <style type="text/css" media="screen">
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 body{
12 padding-top: 80px;
13 }
14 .head{
15 100%;
16 height: 80px;
17 background-color: rgba(0,0,0,.5);
18 position: fixed;
19 top: 0;
20 left: 0;
21 z-index: 99999;
22
23
24 }
25 .wrapper{
26 100%;
27 height: 500px;
28 background-color: red;
29
30 }
31 .top{
32 100px;
33 height: 100px;
34 background-color: purple;
35 position: fixed;
36 bottom: 20px;
37 right: 20px;
38 line-height: 100px;
39 text-align: center;
40 }
41
42 </style>
43 </head>
44 <body style="height: 2000px;">
45
46 <div class="head">
47 导航栏
48 </div>
49 <div class="wrapper">
50 中心内容
51
52 <p style="position: absolute; color: #fff;background-color: green;"> heiheihei</p>
53 </div>
54
55 <div class="top">
56 返回顶部
57 </div>
58 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
59
60 <script type="text/javascript">
61
62 $('.top').click(function(){
63 $('html,body').animate({
64 scrollTop:'10px'
65 },2000);
66
67 });
68
69 </script>
70
71 </body>
72 </html>
08-固定定位
2.z-index
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
居中：
标准流居中：margin: 0 auto; 注意设置高度
中心banner：center top让一个大的背景图居中显示
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css" media="screen">
6 .box{
7 100%;
8 height: 657px;
9 border: 1px solid red;
10 /*left center bottom
11 left center bottom
12 */
13 background: url(./1.jpg) no-repeat center top;
14 }
15 </style>
16 </head>
17 <body>
18 <div class="box">
19
20 </div>
21
22 </body>
23 </html>
中心banner例子
绝对定位的盒子居中：3行公式（设置绝对定位，left50%，向左移动宽度的一半）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css" media="screen">
6 *{
7 padding: 0;
8 margin: 0;
9 }
10 .father1{
11 position: relative;
12 z-index: 5;
13 }
14 .father2{
15 position: relative;
16 z-index: 7;
17 }
18
19 .box{
20 500px;
21 height: 500px;
22 background-color: red;
23
24 position: absolute;
25 left: 50%;
26 margin-left: -250px;
27 z-index: 20;
28 }
29 .box2{
30 300px;
31 height: 300px;
32 background-color: green;
33 position: absolute;
34 left: 50%;
35 margin-left: -150px;
36 z-index: 1000000;
37 }
38 /*z-index*/
39 </style>
40 </head>
41 <body>
42 <!-- <div class="t" style=" 1000px;height: 200px;background-color: yellow;"> -->
43
44 <!-- </div> -->
45 <div class="father1">
46 <div class="box">
47
48 </div>
49
50 </div>
51
52 <div class="father2">
53 <div class="box2">
54
55 </div>
56 </div>
57
58
59
60 </body>
61 </html>
绝对定位的盒子居中
注意：大模块并排用浮动，元素微调可以用定位 后写的绝对定位优先级大
z-index只能用在定位的元素里，定位的比未定位的优先极高；都设置定位的，谁的z-index大谁的优先极高
从父现象例子06！
小米案例购物车07 hover只能用在父代或子代选择器，不仅仅是a标签
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css" media="screen">
6 .cart{
7 100px;
8 height: 50px;
9 background-color: #000;
10 position: relative;
11 margin: 100px auto;
12 cursor: pointer;
13 }
14 .cart-info{
15 position: absolute;
16 300px;
17 height: 100px;
18 background-color: red;
19 top: 50px;
20 left: -200px;
21 display: none;
22 }
23 .cart:hover .cart-info{
24 display: block;
25 background-color: green;
26 }
27 </style>
28 </head>
29 <body>
30
31 <div class="cart">
32 <span class="cart-info"></span>
33 </div>
34
35 </body>
36 </html>
cart
二、css重要知识点总结：
block：换行 inline-block:不换行
1.每个标签 span==> 1.display属性 none|inline|inline-block|block 2.浮动 3.绝对定位
2.浮动原理：为了实现并排
清除浮动三种方式：
1.给父盒子设置固定高度
2.给父元素设置类clearfix，伪元素清除法
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both
}
3.overflow:hidden（可能会有问题）
3.定位：
相对定位：不脱标 position:relative;
作用：1.父相子绝的参考 2.微调元素（例如小米导航栏购物车）
参考点：以原来的自身的位置为参考点进行定位
绝对定位：脱标 position: absolute
作用：1.父相子绝，页面排版布局2.压盖现象
参考点：1个盒子：以页面左上角
父子盒子：以父辈元素左上角为参考点
固定定位：position: fixed;
1.脱标 2.固定导航栏 3.小广告
body{
padding-top: 80px;
}
.head{
100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
4. z-index的用法