position的四个属性

position的四个属性值:1.relative2.absolute3.fixed4.static下面分别讲述这四个属性。<div id="parent"> <div id="sub1">sub1</id> <div id="sub2">sub2</id></div>1. relativerelative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置如下CSS代码:#sub1{ position: relative; padding: 5px; top: 5px; left: 5px;}对于此,您只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变。如果此时把sub2的position也设置为relative,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移。2. absolute当sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:接下来的问题是,sub2的位置到哪里去了呢?由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,,它的文档流不再基于 sub1,而是直接从parent开始。(2)如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。3. fixed当然在Dreamweaver下似乎没有支持4. staticposition的默认值,一般不设置position属性时,会按照正常的文档流进行排列。

只要功夫深,铁棒磨成绣花针。

position的四个属性

相关文章:

你感兴趣的文章:

标签云: