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的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!