一 ， 相对定位
相对定位，就是微调元素位置，让元素相对自己原来的位置，进行位置调整
67A63436-D1BA-42FD-A7FB-CC33523130E5.png
1.1 也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位
1. positition：relative ； -> 必须先申明，自己要相对定位
2. left：100px；->然后进行位置调整
3. top：150px；->然后进行位置调整
1.2 相对定位不脱离标准流，老家留坑，形影分离
921FBFB1-CD1D-45CE-AD8C-B7410C686B60.png
2.3相对定位一般不用于“压盖”效果，因为有老家
1.微调元素
2.绝对定位的参考，子绝父相
二，绝对定位
绝对定位的盒子，是脱离标准文档流的，所以，所有的标准文档流的性质，绝对之后都不遵守了，绝对定位后，标签就不遵守所谓的行内元素块级元素
span{
2 position: absolute;
3 top: 100px;
4 left: 100px;
5 width: 100px;
6 height: 100px;
7 background-color: pink;
8 }
3F848483-D5A5-4720-8446-25B3786996C3.png
2.1 参考点
绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：
3F848483-D5A5-4720-8446-25B3786996C3.png
如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：
082D58B1-1FE3-4E57-A470-E45A02B80386.png
2.2 以盒子为参考点
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。
D8FBEBF4-41D4-4394-A45B-1BC8941A52C0.png
6A75F5E2-434A-4154-BCBF-D11F73987905.png
注意：这个绝对定位要听最近的祖先的，相对最近设置了“定位（无论是相对位置还是绝对位置，但是子绝父觉没有用途，主要是是子绝父绝）”的祖先的位置进行绝对定位
情况例子一
1 <div class="box1"> → 相对定位
2 <div class="box2"> → 没有定位
3 <p></p> → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
4 </div>
5 </div>
情况例子二
1 <div class="box1"> → 相对定位
2 <div class="box2"> → 相对定位
3 <p></p> → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
4 </div>
1 </div>
2.3 绝对定位的儿子，无视参考的那个盒子的padding。
下图中，绿色部分是div的padding，蓝色部分是div的内容区域。那么此时，div相对定位，p绝对定位。
p将无视父亲的padding，在border内侧为参考点，进行定位：
19B1AA5C-092F-41CE-9809-3D28D76F3DD2.png
2.4 绝对定位的盒子居中
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
1 width: 600px;
2 height: 60px;
position: absolute;
3 left: 50%;
4 top: 0;
5 margin-left: -300px; → 宽度的一半
非常简单，当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半
固定定位（IE6不兼容。）
**固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
固定定位脱标！
**
主要用途用于回到顶部
position: fixed;
left: 50%;
top: 0;
z-index
● z-index值表示谁压着谁。数值大的压盖住数值小的。
● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
● z-index值没有单位，就是一个正整数。默认的z-index值是0。
● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
● 从父现象：父亲怂了，儿子再牛逼也没用。
● 定位了的盒子永远压住没定位的盒子。
C7C508E8-F21F-4196-95A2-2AC7ABB68659.png
