12-1 定位(相对，绝对，固定)

一 相对定位

如果仅仅对当前盒子设置相对定位，那么它与原来的盒子没有任何变化、

只有一个作用：父相子绝
不要使用相对定位来做压盖现象

二种现象：
1.不脱标
2.形影分离
实例：

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
24 
25 
26 
class="box1">
27 
class="box2">
28 
class="box3">
29 
30 

二 绝对定位

现象：
   1.设置绝对定位的盒子，脱离标准流
参考点：

   一、单独一个绝对定位的盒子

   1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
   2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。（爱立信）

   二、以父辈盒子作为参考点
   1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。

   2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点

   3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点

   注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，
   影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，
   不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

   还要注意，绝对定位的盒子无视父辈的padding
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。
当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，
实现绝对定位盒子居中
实例：

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
44 
45 "height: 2000px">
46 
class="father">
47         
class="father2">
48             
class="box1">
49 
50             
51         
52 
53 
54 
55 
56 

三 固定定位

固定当前的元素不会随着页面滚动而滚动

特性: 

1.脱标 2.遮盖，提升层级 3.固定不变

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

实例：做了一个固定导航栏

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
47 
48 
49     
class="head">
50         
导航栏
51     
52     
class="wrapper">
53         中心内容
54         
"position: absolute; color: black;background-color: white;">
55     
56     "#">
57         
class="top">
58             返回顶部
59         
60     
61     
64 
65     
78 
79 

四 父相子绝案例

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
61 
62 
63 
class="search">
64     

65         "text" name="">"submit" value="按钮">
66         class="t">小米8
67         class="s">小米MIX 2s
68 
69     
70 
71 
72 
73 

五 z-index

实例：z-index优先级判断

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
31 
32 
33     
class="box">
34     
class="box1">
35 
36 
37 

实例2 从父现象

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
35 
36 
37     
class="father1">
38         
class="box">
39 
40         
41 
42     
43 
44     
class="father2">
45         
class="box2">
46 
47         
48     
49 
50 
51