一、定位
1、定位有三种
1.相对定位 2.绝对定位 3.固定定位
position 属性把元素放置到一个静态的、相对的、绝对的或固定的位置中。
2、position语法
position : static relative absolute fixed
3、position参数
值 描述
static 默认。位置设置为static的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative 位置被设置为relative的元素，可将其移至相对其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边20个像素的位置。
absolute 位置设置为absolute的元素，可定位于相对父元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed 位置被设置为fixed的元素，可定位于相对浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
二、相对定位
相对定位：相对于自己原来的位置定位
position : relative;
left ：10px;
1、现象和使用：
1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
2、特性：
- 不脱标
- 形影分离
- 老家留坑（原来的位置也占着）
所以说相对定位，在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果
3、用途：
- 微调元素位置
- 做绝对定位的参考（父相子绝）绝对定位会说到此内容。
4、参考点：
自己原来的位置做参考点。
三、绝对定位
position : absolute;
top : 10px;
1、特性：
- 脱标
- 有遮盖效果，提升了层级。
设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
2、参考点(重点)：
2.1、单独一个绝对定位的盒子
当使用top属性描述的时候，是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
当使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
2.2、以父辈盒子作为参考点
父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
如果父亲设置了定位，那么以父亲为参考点。如果父亲没有设置定位，那么以设置定位的父辈元素为参考点
不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做网站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
3、作用：
页面布局常见的“父相子绝”，一定要会！！！！
四、绝对定位的盒子居中
当做公式记下来吧！
.box{
width: 100%;
height: 100px;
background-color: #0f0;
position: relative;
}
.box-1{
width: 960px;
height: 100px;
background-color: #00f;
position: absolute;
left: 50%;
margin-left: -480px;
}
/*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%;
margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
}
<div class="box">
<div class='box-1'></div>
</div>
五、固定定位
固定当前的元素不会随着页面滚动而滚动
特性:
- 脱标
- 遮盖，提升层级
- 固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用：
- 返回顶部栏
- 固定导航栏
- 小广告
例子：返回顶部栏
<style> .back_top{ width: 80px; height: 80px; text-align: center; line-height: 80px; background-color: #00aced; position: fixed; bottom: 30px; right: 30px; </style> <div class="back_top">回到顶部</div>
六、z-index
只有设置了定位后，z-index属性才会起作用，没有定位的元素是不会涉及到z-index的
有四大特性
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0，如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁就压着别人，定位的元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
例子：
father1里面有box1，father2里面有box2
father1的z-index值小于father2的，那么box1的z-index值比box大也没用，还是被box2压在下面
<head> <style> div.father1{ width: 400px; height: 400px; background-color: darkmagenta; position: relative; z-index:10; } div.father2{ width: 400px; height: 400px; background-color: darkorange; position: relative; z-index:20; } div.box1{ width: 200px; height: 200px; background: red; position: absolute; top: 350px; left: 450px; z-index: 999; } div.box2{ width: 200px; height: 200px; background-color: yellow; position: absolute; left: 480px; z-index: 20; } </style> </head> <body> <div class="father1"> <div class="box1"></div> </div> <div class="father2"> <div class="box2"></div> </div> </body>
