浅谈position(定位)

2017.09.15.第一次写博客 感觉很奇妙 ，我也不是什么技术很厉害的人，把自己做前端经历的坎坎坷坷分享给各位刚踏上前端或者说是准备踏上前端的老哥老姐们。

今天主要是说一下css中一个重要的东西position属性。

在W3C School是这样定义position的position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。首先呢，定位顾名思义制定元素的位置，众所周知页面的文档流在没有被破坏的情况下是从左往右从上往下依次排列的。而position恰恰是其中的破坏者，就好像你跟你女朋友发展的好好的，谈恋爱，结婚生孩子，孩子再谈恋爱结婚生孩子.....而position就是小三突然跳出来把你计划打乱了，逼着你去相亲跳过谈恋爱直接到结婚。好了下面介绍一下position的几个属性。

第一个也是默认属性：static。元素的position属性的默认值，即你给元素设置position:static;与不设置他的值都是这个，他的作用就是他根本没作用哈哈哈，不瞎扯了，如果元素的position属性是static的话，那么元素会在页面文档流的默认位置上。

第二个属性：relative。元素有了它就很厉害了，首先元素不会脱离文档流，也就不会对页面造成破坏，其次呢元素还可以自由移动，当然元素移动的参照物是本身的位置，但是移动过后本身的位置依旧保留，就好像是元素的一个分身留在原地别人看不见，但是能摸着，移动的四个属性top，left，right，bottom。当然不是你设置top:10px;元素往上移动，而是元素距离原来顶部10px。其他同理

第三个属性：absolute。万恶的小三之一，文档流的破坏者之一，元素有了它就有了各种超能力。absolute属性会使元素脱离文档流，然后这个元素右面的下面的元素就蠢蠢欲动了，想上位啊。这个元素的移动也是四个属性top，left，right，bottom。但是他的参照物就变了，它需要往上寻找一个具有position属性(static不算)的祖先来参照。如果找不到就会参照浏览器窗口进行定位。所以一般设置定位都会将需要absolute的元素的父级给一个relative属性，以确保这个元素不会乱参照。

第四个属性fixed。它跟absolute有相似的地方有不同的地方，它也是脱离文档流，但它的参照物一直是浏览器窗口。这个属性的主要用途就是当你需要一个跟随滚动条活动一直显示在相同位置的元素时使用它，当然还有js方法来实现元素跟踪滚动条。

最后谈一点，说道position不得不说元素的另外一个属性 z-index，元素的堆叠，简单的意义就是元素在z轴上的位置，就是说浏览器窗口其实是一个3D视图，但是你无法从左右看，你看到的永远只有最上面，而z-index就是把元素往上拉，z-index的值越大，元素显示越靠前(理解成离你眼睛最近);

好了，就讲到这里，反正想到哪写哪。

有错误的地方求大佬指正