position定位——让人又爱又恨的属性

关于css中的position这个属性，在使用的时候，有时很强大，有时又让人很无奈。

强大的时候，对于div中的一些小物件不方便使用margin或者padding的时候，给与position:absolute;再配备left、right、top和bottom，基本上就是想放哪里放哪里了。

让人无奈的时候，就是咱们一旦滥用了position这个定位属性，就会让本身的布局飞的满天是，又由于z-index没有设定好，基本上，总体的布局就会让你手足无措，找缘由的话，又很是麻烦，最后，恐怕只能推倒重作了。

因此，对待position这个属性，咱们要详细的了解到它运行的原理，以及应用的场景，这样，咱们才能够在想用的时候完美的驱使它来完成咱们想要的效果。

废话很少说，直接上步骤，先说position的概念吧

position,咱们百度一下，就知道这个单词的意思是方位，在css中，就是定位的意思，属性名字是 position，属性值有五个，分别是 static（默认定位）、absolute（绝对定位）、relative（相对定位）、fixed（固定定位）、inherit（继承定位，不经常使用）。

书写规则：

position:static|absolute|relative|fixed|inherit

 

每一个属性值都介绍一下吧 

      一、position:static（默认定位）

      顾名思义，就是咱们日常书写的时候，每一个div在文档流中默认的排版，就是static属性值，它不会让div或者其余元素脱离文档流，而是遵循排版的原则，从上到下，块级元素换行，行内元素不换行等等通用原则，因此，若是不用定位属性，那么这个position就不用设置。

      二、position：relative（相对定位）

      相对定位，就是相对于本身自己进行定为移动，它不会脱离文档流，也就是说，我给一个元素设定了这个属性，那么这个文件还会在这个文档流中来回移动，至于怎么移动，下面再讲。

      三、position：absolute（绝对定位）

      跟相对定位不一样，它是相对于拥有相对定位属性的父元素进行定位移动，它会脱离文档流。

      若是父元素中的全部子元素都设置了absolute，那么全部的子元素都会浮起来，而后堆叠到一起，因此为了把各个元素摊开显示，咱们须要移动这些元素，而移动这些元素的方法，就是直接是style样式表中书写：left、right、top、bottom四个属性，而后在属性的后面写上px(像素)、%（百分比）等能够表示距离的单位。

　　在这里，咱们要特别强调，left和right不能同时使用，top和bottom不能同时使用。

　　而且，这四个元素，都是相对于拥有相对定位（relative）属性的父元素进行移动的。若是父元素没有相对定位，那么绝对定位就是相对于body进行定位的。

　　因此，为了避免让本身设置的元素跑飞了，那就记得给父元素设置relative吧。

　　四、fixed（固定定位）

　　这个定位是相对于浏览器窗口进行的定位，移动方法跟相对和绝对定位同样的。

　　它也会脱离文案流，咱们常见的侧边栏或者广告图就是用这个功能实现的。很实用，很强大的功能。

　　五、inherit（继承定位），就是从父元素继承position定位属性，不怎么经常使用。

 

　　讲到这里，咱们就涉及到一个z-index (层级)的问题。刚才咱们讲过，若是给子元素所有设置了absolute，那么全部的子元素就会堆叠在一块儿，互相遮盖。

　　若是咱们须要在一个元素上堆叠好多层，那怎么给它们排序呢。这就须要用到z-index属性了。

　　z-index属性的属性值是数字。数字越大，那么它就显示的最考上，好比说吧，

　　z-index=0 的元素就会再 z-index=1的下面显示，z-index=10会再z-index=8上面显示，因此，堆叠它们的显示顺序，设置z-index就能够了。

　　固然，若是不设置z-index的话，默认的，后面的元素会遮盖前面的元素。

 

　　使用时需注意的问题：

　　一、float属性不能够和position属性共用，切记！

　　二、使用absolute时记得给父元素加relative

　　三、除了用left和top外，还有right和bottom，活学活用

　　四、能不用position就不用position，毕竟容易把布局搞乱

　　五、Javascript中调用position的方法是：div.style.positio=”absolute”相似 div是变量名

 

　　上面只是简单的讲了一下position的基本东西，若是你在这里面没有了解到你想要的答案，你能够在下面给我留言，我会积极回复的。

　　最后，积极交流，共同进步！