1.定位（position）
1.定位是一种更加高级的布局手段
2.定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。
2.几种定位属性
相对定位: 相对于原本文档流中的位置定位，仍然占据原位置；
固定定位: 相对于浏览器窗口定位，翻页时位置不变；
绝对定位: 相对于离他最近的已定位父级进行定位,一直找到浏览器窗口为止；
1.static:默认值 元素是静止的 没有开启定位
2.relative:相对定位
1.通过偏移量设置元素的位置:
top:定位元素和定位位置上边的距离
bottom:定位元素和定位位置下边的距离
left:定位元素和定位位置左边的距离
right:定位元素和定位位置右边的距离
2.特点：
1.参照与元素在文档流中的位置进行定位的
2.会提升元素的层级
3.不会使元素脱离文档流
4.不会改变元素的性质
3.absolute:绝对定位
特点:
1.如果不设置偏移量，元素位置不会发生变化。
2.元素会从文档流中脱离
3.会改变元素的性质，行内变成块，块的宽高被内容撑开
4.会使元素提升层级
5.是相对于其包含块进行定位的
4.fixed:开启元素的固定定位
1.固定定位也是一种绝对定位 所以固定定位的大部分特点和绝对定位一样。
2.不同的是，固定定位永远参照于浏览器窗口进行定位。
3.固定定位的元素不会随滚动条滚动上去 而是跟随窗口的移动而移动。
简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/**{margin: 0;padding: 0;}*/
body{
height: 10000px;
}
div{
width: 100px;
height: 100px;
}
#guDing{
background: lightblue;
position: fixed;
left: 500px;
top: 200px;
}
#xiangDui{
background: lightcoral;
position: relative;
left: 100px;
top: 100px;
}
#jueDui{
background: lightgreen;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="guDing"></div>
<div id="xiangDui"></div>
<div id="jueDui"></div>
嵌套规则:
块里面可以放行内
行内里面不可以放块
</body>
</html>