CSS中更加高级的布局手段——定位之绝对定位
定位：
- 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素
- 通过position属性来设置元素的定位
-可选值：
static： ['stætik] 默认值，元素没有开启定位
relative： ['relətiv] 开启元素的相对定位
absolute： ['æbsəlju:t] 开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
sticky： ['stiki] 开启元素的粘滞定位
当position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位：
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的包含块定位的
（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，开启BFC属性，内联元素变成行内块元素，块元素的宽度和高度默认都被内容撑开
包含块：containing block
-正常情况下：离当前元素最近的祖先块元素
-定位情况下：离他最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位，html （根元素，初始包含块）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 200px;height: 200px;background-color: yellow;position: absolute; left: 0px;top: 0px;bottom:0px}.box3{width: 200px;height: 200px;background-color: yellowgreen;}.inner{width: 300px;height: 300px;background-color: orange;/*开启inner的相对定位*/position: relative;}.outer{width: 400px;height: 400px;background-color: #ccc;/*开启outer的相对定位*//* position: relative; */}.s1{/* width: 100px;height: 100px; */background-color: pink;/*开启绝对定位*//* position: absolute; */}</style></head><body><div class="box1"></div><div class="outer"><div class="inner"><div class="box2"></div></div></div><div class="box3"></div><span class="s1">我是一个span</span></body>
</html>