详解position属性

position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。
position的四种属性

  • static
    无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。
  • relative
    对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置,关键点是它原本的空间仍然保留。
//HTML//CSS div{ width:200px; height:100px; background:pink; border:1px solid; } .relative{ position:relative; top:20px; left:20px; background:lightgreen }

详解position属性
文章图片
【详解position属性】相对定位相对的是它原本在文档流中的位置而进行的偏移,并且原本的空间也占据着,下面的元素并不会顶替上去
  • absolute
元素设置成absolute后会脱离文档流,并且不占有原本的空间,后面的元素会顶替上去,而且不论元素是行内元素还是块级元素,都会生成一个块级框,也就是例如行内元素span设置了absolute后就可以设置height和width属性了。看下面例子:
//HTML//CSS div{ width:200px; height:100px; background:pink; } .absolute{ position:absolute; width:100px; height:100px; background:lightgreen; top:50px; left:20px; }

详解position属性
文章图片
注意:
relative和static方式在最外层时是以标签为定位原点的,而absoulte方式在无父级是position非static定位时是以作为原点定位。和元素相差9px左右。
//HTML//CSS .relative{ position:relative; width:100px; height:100px; border:1px solid pink; }.absolute{ position:absolute; width:100px; height:100px; border:1px solid lightgreen; top:0px; }

详解position属性
文章图片
看了上面的代码后,细心的朋友肯定要问了,为什么absoulte定位要加 top:0; 属性,这是不是多此一举呢?
其实加上这个属性是完全必要的,因为我们如果使用absoulte或fixed定位的话,必须指定 left、right、 top、 bottom 属性中的至少一个,否则left/right/top/bottom属性会使用它们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递,简单讲就是都变成relative,会占用文档空间,这点非常重要,很多人使用absolute定位后发现没有脱离文档流就是这个原因,这里要特别注意~~~
  • fixed
    fixed定位,又称为固定定位,它和absoult定位一样,都脱离了文档流,并且能够根据top、right、left、bottom属性进行定位,但不同的是fixed是根据窗口为原点进行偏移定位的,也就是说它不会根据滚动条的滚动而进行偏移。
.nav{ position:fixed; top:0; z-index: 999; }

给导航栏加上如上css就可以使导航栏固定在顶端。
参考资料:http://luopq.com/2015/11/15/css-position/

    推荐阅读