css中position有个值是absolute, 功能非常强大，用来进行定位能做到许多奇妙的效果，下面就介绍一下absolute
当使用了absolute之后，元素就会脱离文本流，什么意思？看下面的代码和图来理解
这是源码
<body> <div style="width:100px;height:100px;background:red"></div> <div style="width:100px;height:100px;background:blue;"></div> <div style="width:200px;height:200px;background:green"></div> </body>
效果如下图所示：
可以看到，3个div都是正常的显示，这时如果第二个div使用了position:absolute，那么第二个div就
会脱离正常的文档流，漂浮在原来的位置之上，而原来的位置就会空出来，那第三个div就会寄上来，相当
于只有1 3两个div占据了第一二行的位置，而第二个div为再叠加在第二行的位置之上
效果如下图所示：
这便是absolute最基本的特点：脱离基本文本流
一般absolute和right(left,top,bottom)一起使用，这样就能使div(也可以是别的，为了方便说明，下
面只用div进行说明，别的类似)在基本文本流之上进行移动，这时也有一些限制
当我们想移动一个div时，可以通过改变left，top的值来实现，有些情况也有一些限制
当想要移动的div的父级有position:absolute/relative/fixed时候，left和top(bottom和right)便是以父级div
为基准进行移动
效果如图所示：
源码如下
<body> <div style="width:200px;height:200px;background:green;position:fixed;margin:20px;"> <div style="width:50px;height:50px;background:red;position: absolute;right:0"></div> </div> </body>
若是父级没有这几个属性，那么正常情况下当设置的时候是以浏览器为基准进行移动的
也有很多情况下可以利用relative和absolute进行配合来定位元素，这也是其中一种方
法，但是这种方法也absolute依赖于relative，当需要改变父级时，div又需要重新计算right
和top的位置
比较好的方法是使用absolute的无依赖定位
举一个例子吧，在很多网站中用得比较多的是搜索框下面的提示内容框，当我们再搜索框
中输入时，搜索框下面会弹出一个框，里面显示内容相匹配的提示框，这种效果可以使用relative
和absolute来实现，有一个更好的方式是便是上面所说的无依赖定位
效果如图所示：
源码如下
<style>
*{
padding:0;
margin:0;
}
body{
font-size:14px;
font-family: '微软雅黑'
}
input:focus {
outline: none
}
.inp {
border: none;
width: 200px;
line-height: 24px;
}
.searchbox {
margin: 20px auto;
width: 200px;
height: 25px;
border: 1px solid;
}
ul{
width:202px;
background:aqua;
position: absolute;
margin:26px 0;
}
li{
list-style: none;
line-height: 30px;
margin-left:5px;
}
</style>
</head>
<body>
<div class="searchbox">
<ul>
<li>搜索框提示内容1</li>
<li>搜索框提示内容2</li>
<li>搜索框提示内容3</li>
<li>搜索框提示内容4</li>
</ul>
<input class="inp" type="text">
</div>
</body>
这时利用的是margin属性和absolute来进行定位的，这样便不需要利用到父级的relative，
在正常情况下，提示框是在上方，搜索框是在下方，而当提示框设置了position:absolute时，
便脱离了文本流，搜索框变到达了顶部，也就是现在的位置，而提示框也到达了顶部，不过是
在搜索框之上，这时候只需要设置margin属性使提示框下移动即可，距离为搜索框的高度，这
样做的好处在于提示框可以很好的定位到搜索框下面，当需要移动整个搜索框的位置的时候，
提示框也能准确定位在搜索框下方
效果如图所示：
设置搜索框在浏览器的左方，提示框依然准确的定位，这就是absolute定位的好处
(这个例子只是对提示框进行定位来说明这个方法，相应的js没有实现，有兴趣的可以自己
实现)
另外再讲讲absolute和width/height的关系
当需要设置一个div的宽度的时候，通常使用width和height来设置宽和高，也有另外一种方
法，就是使用right和lleft，top和bottom来设置宽和高
效果如图所示:
当在position：absolute下设置两个对立的属性right和left，top和bottom，变现为纵向(横向)
拉伸，即变成了对应的宽度和高度
好了，这次就到此为止，本文是对慕课网上的<CSS深入理解之absolute>的学习总结