定位：
定位有三种：
1，相对定位。
2，绝对定位。
3，固定定位。
相对定位：
相对定位：相对于自己原来的位置的定位。
现象和使用：
1，如果对当前元素仅仅设置了相对定位，那么与标准流的盒子有什么区别。
2，设置相对定位之后，我们才可以使用四个方向的属性：top，bottom，left，right
特性：
1，不脱标。
2，形影分离。
3，老家留坑。
所以说相对定位，在页面中没有什么太大的作用，影响我们页面的布局，我们不要使用相对定位来做压盖效果。
用途：
1，微调元素位置。
2，做绝对定位的参考(父相子绝)绝地定位会说到此内容。
参考点：
自己原来的位置做参考点。
---恢复内容结束---
定位：
定位有三种：
1，相对定位。
2，绝对定位。
3，固定定位。
相对定位：
相对定位：相对于自己原来的位置的定位。
现象和使用：
1，如果对当前元素仅仅设置了相对定位，那么与标准流的盒子有什么区别。
2，设置相对定位之后，我们才可以使用四个方向的属性：top，bottom，left，right
特性：
1，不脱标。
2，形影分离。
3，老家留坑。
所以说相对定位，在页面中没有什么太大的作用，影响我们页面的布局，我们不要使用相对定位来做压盖效果。
用途：
1，微调元素位置。
2，做绝对定位的参考(父相子绝)绝地定位会说到此内容。
参考点：
自己原来的位置做参考点。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ border:1px solid green; } div{ width: 200px; height: 200px; background-color: red; position: relative; top: 30px; left: 30px; } </style> </head> <body> <div class="wrap"></div> </body> </html>
绝对定位：
特性：
1.脱标
2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
参考点(重点)：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin:0; } .wrap{ width: 400px; height: 400px; padding: 100px; background-color: yellow; position: relative; } .container{ width: 500px; height: 500px; background-color: green; position: relative; padding: 20px; } .box1{ width: 200px; height: 200px; background-color: red; position: absolute; /*绝对定位的盒子当设置top的时候 是以页面的左上角为基准(浏览器的左上角)*/ top: 100px; left: 50px; } </style> </head> <body style="height:2000px;"> <div class="wrap"> <div class="container"> <div class="box1"></div> </div> </div> </body> </html>
绝对定位的盒子居中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin:0; } .box{ width: 100%; height: 69px; background: #000; } .box .c{ width: 960px; height: 69px; background-color: pink; position: absolute; margin:0 auto; /*left:50%;*/ /*margin-left:-480px;*/ } </style> </head> <body> <div class="box"> <div class="c"></div> </div> </body> </html>
固定定位：
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标
2.遮盖，提升层级
3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用：
1.返回顶部栏
2.固定导航栏
3.小广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位</title> <style> div{ width: 200px; height: 200px; background-color: red; position:fixed; bottom:100px; left: 100px; } </style> </head> <body style="height:2000px;"> <div class="d1"></div> </body> </html>
z-index:
1，z-index值大的遮盖z-index值小的。
2，只有定位了的元素，才会有z-index这个属性。
3，z-index没有单位，就是一个正整数。默认的z-index值是0，如果都没有z-index值，那么在后面的会遮盖前面的，且定位了的元素，永远可以遮盖没有定位的元素。
4，从父现象：意思就是如果有几个同一级别的盒子，如果一个盒子的z-index值是最大的，那么这个盒子将遮盖其他同级别的盒子，且，这个盒子的子级盒子，也将可以遮盖其他盒子的子级盒子。(白话谓之：父类不行，那么儿子也不行。)