定位：
? ? ? ? - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素
? ? ? ? - 通过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>