关于css 中position使用的浅谈

在css中有一种属性position。在W3C上我们可以找到他又一下几种属性:absolute、fixed、relative、static、inherit。但是position的使用却并不是简简单单的将以上的属性值写入css就可以大功告成的,要想使用position,就要考虑这几种属性值在不同父级元素中的效果,以及自身标签中其他属性的值。

   下面就具体解释一下这几个属性值的用法,不过首先你要理解“盒模型”,如果不明白,就要自学一下了(不是本文讨论的问题)。笔者也是看了其他博主的博文后,结合自己的理解整理的。所以借鉴了一些他人的思想。

1、static:

   即默认的值,如果不对元素设置的话又没有设置为‘继承’,就相当于没做设置,所以很少看到有将position设置为static的情况,但只是少用,而不是不用。

 

2、relative(相对):

  使用这个元素时,要先找到该元素的父元素,还要知道trbl属性(top、right、bottom、left)。所谓相对,就是在父元素内部,设定子元素相对父元素中自己原来的的位置,比如:top:20px;就是距离父元素中自己原来的的位置偏下20像素,一般来说只需要指定横向上的一个和纵向上的一个,即可达到子元素定位的效果。另外,要强调一点,relative定位的子元素是不能重叠的,即他会考虑其他元素而布局的。

设置之后,原来的框还在,但自己已经偏移到原框偏移了。

 

3、absolute(绝对):

  即在父元素中不考虑同级子元素,用trbl属性(top、right、bottom、left)定位,但是有重叠,即在同一个父元素中,几个子元素使用相同的trbl属性(top、right、bottom、left),就会出现在同一个位置。因此会出现遮盖,这时候我们需要z-index设置显示优先级,值为自然数,即数值越大,显示层越靠前,越有可能被用户看到。值得注意的是,在W3C中指出“生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。”

  即在使用position:absolute时,应该先看看父元素。我们已经知道,如果static是一个默认值,即使用position:absolute前,先对父元素设置成一个“最近的已经定位的祖先元素”通常将父元素(被参考的先祖元素)设为position:relative。

4、fixed

  fixed与相似,只不过他的“参考先祖元素”是浏览器,即浏览器直属部队。

5、inherit

  即继承父元素的position值。

原文地址:https://www.cnblogs.com/webARM/p/3780821.html