从fixed展开谈position

阅读数:1547 发布时间:2016-07-10 18:52:55

作者:w3ljc 标签: css position w3ljc

通过做网页要求固定div而了解到了fixed,就顺便了解了一下所有position的可能值背后的意义

css中position可能的值有四个:static、fixed、absolute、relative。

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(静态定位):

static,无特殊定位,它是html元素默认的定位方式,即我们不设定元素的position属性时默认的position值就是static,它遵循正常的文档流对象,对象占用文档空间,该定位方式下,top、right、bottom、left、z-index等属性是无效的。

相对定位(relative) :

relative定位,又称为相对定位,从字面上来解析,我们就可以看出该属性的主要特性:相对。这个相对是指与它本来应该在的位置产生的相对偏移量,而页面上虽然产生了偏离,但实际并没有脱离文档流,在文档流中的位置也不随着top/bottom/left/right的设定而改变,故会出现relative修饰过的div覆盖之后的div的情况。

绝对定位(absolute) :

说是绝对定位,实际上是相对于父类的定位,该父类必须是非static定位的,出现在可视面板之外时会导致滚动条的出现,因为它是脱离文档流的。应当注意的是,用absolute定位时一定要设定top/left/bottom/right中的某一个值,否则将出现意想不到的局面。

固定定位(fixed):

fixed定位,又称为固定定位,它和absoult定位一样,都脱离了文档流,并且能够根据top、right、left、bottom属性进行定位,但不同的是fixed是根据窗口为原点进行偏移定位的,也就是说它不会根据滚动条的滚动而进行偏移。

相关文章推荐: