static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性定义。
static,无特殊定位,它是html元素默认的定位方式,即我们不设定元素的position属性时默认的position值就是static,它遵循正常的文档流对象,对象占用文档空间,该定位方式下,top、right、bottom、left、z-index等属性是无效的。
relative定位,又称为相对定位,从字面上来解析,我们就可以看出该属性的主要特性:相对。这个相对是指与它本来应该在的位置产生的相对偏移量,而页面上虽然产生了偏离,但实际并没有脱离文档流,在文档流中的位置也不随着top/bottom/left/right的设定而改变,故会出现relative修饰过的div覆盖之后的div的情况。
说是绝对定位,实际上是相对于父类的定位,该父类必须是非static定位的,出现在可视面板之外时会导致滚动条的出现,因为它是脱离文档流的。应当注意的是,用absolute定位时一定要设定top/left/bottom/right中的某一个值,否则将出现意想不到的局面。
fixed定位,又称为固定定位,它和absoult定位一样,都脱离了文档流,并且能够根据top、right、left、bottom属性进行定位,但不同的是fixed是根据窗口为原点进行偏移定位的,也就是说它不会根据滚动条的滚动而进行偏移。
相关文章推荐: