position属性
通过设置定位将页面中的元素摆放到页面的任意位置，我们使用position属性来设置元素的定位
- static 默认值，元素没有开启定位
- relative 开启元素的相对定位
- absolute 开启元素的绝对定位
- fixed 开启元素的固定定位
偏移量
- left
- top
- right
- bottom
一般情况我们只设置一个水平偏移量和垂直偏移量，用这两个偏移量来确定元素的位置。
相对定位
- 开启相对定位时如果不设置偏移量，元素不会发生任何变化
- 相对定位元素相对于其自身原来在文档流中的位置来定位
- 相对定位的元素不会脱离文档流
box2开启向对定位且向右偏移box3宽度的像素，但是box3没有向上顶，原因就是原来box2还在文档流中
- 相对定位不会改变元素的性质，块级元素还是块级元素，内联元素还是内联
- 相对定位的元素会提升一个层级
此时box2开启相对定位，它把box3给覆盖了一些，说明box2比box3高了一个层级
绝对定位
- 元素设置成绝对定位以后，如果不设置偏移量，元素位置不会发生改变
- 绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位的，如果所有祖先元素都没有开启定位，则相对于浏览器窗口进行定位
box1为box4的父元素，box1开启定位，box4开启绝对定位，则他的偏移量是根据box1的位置来定的，也就是最近的开启了定位的祖先元素。
绝对定位会完全脱离文档流
绝对定位会改变元素的性质。内联变成块元素，块元素的高度和宽度都被内容撑开，并且不独占一行(脱离文档流的特点，浮动也有)
绝对定位会使元素提升一个层级
固定定位
固定定位是一种特殊的绝对定位，他的特点大部分和绝对定位一样，但是不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的，并且不会随滚动条滚动(用来实现广告窗口，固定导航条等)
层级
在一般开启定位之后，开启定位的元素会提升一个层级，也就是它会覆盖上面的元素，如果两个元素都开启了定位，那么后面的元素就会覆盖前面的元素，那么如果我们想前面的元素覆盖上面的元素，我们可以通过设置z-index属性来做到。
z相当于z轴，因为层级已经不是水平方向的了，一般我们给z-index设置整数，整数越大，层级越高。
opacity
当元素出现了层级的概念之后，opacity也很好理解了，比如我们设置了box4是覆盖box1的，但是我们想通过box4来看到box1，那么我们可以通过设置opacity属性来设置box4的透明度。
opacity值在0~1之间，0是全透明，1是不透明，0.5就是半透明。
