标签：
今天学习之前剩下的一个问题：CSS的position属性。首先归纳出和position相关的问题：
第一个问题：position作为一个属性，它一共有哪几个属性值？
对于position属性，他一共有5个值，分别是
这种定义性质的问题，一般在W3cSchool上可以找到最标准的的答案，这5种属性的解释已经非常详细。其实我们在开发中经常用的只有relative、absolute、fixed这3个属性，另外当给元素增加了这是种属性中的任意一种，我们也就需要根据情况设置元素的left/top/right/bottom以及z-index，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，显示层级通过z-index控制。
第二个问题：position常用的属性值有哪几个？分别有什么特点？
上面已经提到了我们常用的3个属性值：relative、absolute、fixed。
relative：元素的position属性设置为relative后，这个元素会以自己之前的位置为参照，根据设置的left等值进行移动。下面举个栗子~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width: 100px; height: 100px; background-color: #0044aa; margin: 5px; } #div2{ width: 100px; height: 100px; background-color: #e13b00; margin: 5px; position: relative; left: 50px; top:50px; z-index: -2; } #div3{ width: 100px; height: 100px; background-color: yellow; margin: 5px; } </style> </head> <body> <div style="height: 1000px"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </div> </body> </html>
代码的效果如下图：
第二个div是根据它之前的位置进行了移动，并且它之前的位置并没有被后面的元素占据。红色的div被黄色的div遮盖是因为z-index的作用。
absolute：对于position属性是 static 定位以外的第一个父元素进行定位。这里需要详细分析一下这句话：首先我们可以判断出，absolute定位参照的对象是它拥有定位属性的父级元素；然后，这个父级元素的position属性不能是static。
这里再想细一点：如果元素没有拥有position属性的父级元素怎么办？ 这里我通过查资料确定了这种情况它会根据<html>标签也就是页面的根节点进行定位。（注意是<html>标签）
下面将div2的position属性改为absolute查看效果：
这样我们就可以发现红色div移动之前的位置会被黄色的占据，这时候其实表示红色的div已经脱离了文档流。
最后一个属性值：fixed.它的效果其实和absolute类似，都属于绝对定位，但是它的参照则是固定的浏览器窗口。修改div2的position属性改为fixed后，滚动鼠标滚轴就可以查看效果，利用这个特性我们可以做出类似侧边悬浮窗（某些网站侧边的小广告(ノ?益?)ノ彡┻━┻）这样的效果。
其实，我在学习position过程中感觉到，掌握好元素的参照物是理解position属性的关键，确定好参照物，然后再根据属性值的类型判断后面的元素的状态，就能确定好元素的位置啦~
PS：通过这几天自己提问自己想办法解答的学习过程，真的收获很多。其实平时学习过程中忽略的细节还是很多的，经历了这样的一个过程自己的基础知识又扎实了不少~另外我还发现利用博客来分享知识更是个快乐的过程，又能提高编程技术又能提高表达能力，同时还有可能帮助到别人，所以一定要坚持下去！！(╰_╯)#
2016年1月11日
不积跬步，无以至千里
PS：我查阅的大部分资料都是来自于网络，如有侵权，请联系我删除
标签：
原文地址：http://www.cnblogs.com/laobeiV5/p/5121949.html
