一 ， 相对定位

相对定位，就是微调元素位置，让元素相对自己原来的位置，进行位置调整

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