定位（相对；绝对；固定）z-index 重叠层级

定位

相对定位

position：relative；

div{
position:relative;   //先写下这一行，之后才能设置定位；
top:-20px;           //相比于原来的顶部移动-20px，也就是往上移20px
left:20px;           //相比于原来的左边移动20px，也就是往右移20px
bottom:-10px;        //相比于原来的底部移动-10px，也就是往下移10px
right:20px;          //相比于原来的右部移动20px，也就是往左移20px
}

相对于原来自己的位置，进行指定的偏移，相对定位的话，他仍然在标准文档流中（不像float一样）！原来的位置会被保留.
如下图虽然盒子三移出了，但是他原来的位置被保留

绝对定位

position:absolute;

定位的方法和相对定位一样

1. 没有父级元素定位的前提下，相对于浏览器定位，且相对的是浏览器一打开时的页面
   (如果定位在右下角，而浏览器页面很长，有滚动条才能浏览完，那么他不会定位在滚动条最下面右下角，而是在一打开页面后，还没动滚动条的时候的右下角）
2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移（父级元素存在定位即可，相对还是绝对都可以）
3. 相对于父级或者浏览器的位置进行指定的偏移，绝对定位的话，他不在标准文档流，原来的位置不会被保留

固定定位

position:fixed;

该定位是一直定位在页面的某个位置，像小广告一样，无论是怎么滚动滚动条，他在当前页面中的位置始终不变。

z-index

默认是0，最高无限。
如：z-index：29；
当两个元素使用绝对定位，或者其他方式，使得两个元素重合，可根据z-index：数字；来设置层级。
如果一个层级低就会被另一个元素覆盖。

这是元素的不透明级别opacity
如opacity：0.5
重叠过后即使不设置层级，只是设置透明度的大小，也能看见模糊的层级下面的文字。