css中的position的示例分析

小编给大家分享一下CSS中的position的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

书写规则：

position:static|absolute|relative|fixed|inherit

每个属性值都介绍一下吧

1、position:static（默认定位）

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

2、position：relative（相对定位）

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

3、position：absolute（绝对定位）

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

如果父元素中的所有子元素都设置了absolute，那么所有的子元素都会浮起来，然后堆叠到一块儿，所以为了把各个元素摊开显示，我们需要移动这些元素，而移动这些元素的方法，就是直接是style样式表中书写：left、right、top、bottom四个属性，然后在属性的后面写上px(像素)、%（百分比）等可以表示距离的单位。

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

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

所以，为了不让自己设置的元素跑飞了，那就记得给父元素设置relative吧。

4、fixed（固定定位）

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

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

5、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的话，默认的，后面的元素会遮盖前面的元素。

使用时需注意的问题：

1、float属性不可以和position属性共用，切记！

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

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

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

5、javascript中调用position的方法是：div.style.positio=”absolute”类似 div是变量名

以上是“css中的position的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网VUE频道！