Windfly`s Blog-一个注重技术分享的博客
  1. 首页
  2. 技术研究
  3. 内容

了解relative absolute fixed static


首先:fixed属性,当使用ostion:fixed时的时候,一般也会使用left、top这两个属性,left是指距离浏览器窗口左边的距离,top是指距离浏览器窗口上面的位置。并且如果网页高度很大右侧有滚动条的时候,他的位置不会随着滚动条的滚动而发生位置的变化,也就是说他的位置是固定的,看下面的例子CSS POSITIONbody{height:1200px;}.div_fixed{position:fixed ;left:100px;top:100px;width:50px;height:50px;background:#f00;}

然后:absolute使用position:absolute属性时,一般也会使用left和top这两个属性,但是此处的left和top指的是具距离该元素的参照物的距离,那么这个参照物是什么呢?想作为使用position:absolut属性元素的参照物需要具备两个条件:第一个条件:是他的父元素,第二个条件:父元素使用了position:fixed;position:absolute;position:relative这三个属性中的其中一种,满足了这两个条件之后,那么left和top就以这个父元素做为参照物,那么如果没有满足呢?没有满足的话就会以(0,0)作为参考进行偏移,你说的设置了 position:absolute属性,但是并没有设置left和top就是为了满足这个条件的看下面的两个例子例子一CSS POSITIONbody{height:1200px;}.div_fixed{position:fixed ;left:100px;top:100px;width:50px;height:50px;background:#f00;}.div_absolute{position:absolute ;left:100px;top:100px;width:50px;height:50px;background:#ff0;}

例子2CSS POSITIONbody{height:1200px;}.div_fixed{position:fixed ;left:100px;top:100px;width:50px;height:50px;background:#f00;}.div_absolute{position:absolute ;left:100px;top:100px;width:50px;height:50px;background:#ff0;}

然后是是static这个属性,这个是一个默认存在的属性,如果你没有使用position:fixed;position:absolute;position:relative,那么默认使用的就是static属性,最后是position:relative属性,position:relative这个属性也会结合left和top使用,而且他也是有参照的,那么他的参照物是什么?他的参照就是这个元素使用static属性时的位置,看下面的两个例子假设这个元素没有使用position属性

CSS POSITIONbody{height:1200px;}.div_none{width:50px;height:50px;background:#f00;}

如果使用了relative属性

CSS POSITIONbody{height:1200px;}.div_none{position:relative ; left:100px;top:200px;width:50px;height:50px;background:#f00;}
总结:position:fixed;position:absolute;position:relative 这三个属性相同的是都会结合left和top属性使用,不同的是left和top的参照物不同,掌握了这三种情况下的参照物是什么,也就掌握了这三个属性的使用方法

  CSS
分享到

作者  :  windfly

本文由 windfly 原创,未经作者许可禁止转载!转载若许可请注明来自 Windfly`s Blog



评论列表