position的四个属性值: relative ,absolute ,fixed,static
下面分别讲述这四个属性,以简单代码表示
<div id="parent">
<div id="sub1">sub1</id>
<div id="sub2">sub2</id>
</div>
1. relative
relative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置如下CSS代码:
- sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}
我们可以这样理解,如果不设置relative
属性,sub1
的位置按照正常的文档流,它应该处于某个位置。但当设置sub1
为的position
为relative
后,将根据top
,right
,bottom
,left
的值按照它理应所在的位置进行偏移,relative
的相对的
意思也正体现于此。
对于此,只需要记住,sub1
如果不设置relative
时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。
随后的问题是,sub2
的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1
增加了position
的属性而发生改变。
如果此时把sub2
的position
也设置为relative
,会发生什么现象?此时依然和sub1
一样,按照它原来应有的位置进行偏移。
注意relative
的偏移是基于对象的margin
的左上侧的。
2. absolute
这个属性总是有人给出误导。说当position
属性设为absolute
后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。
当sub1
的position
设置为absolute
后,其到底以谁为对象进行偏移呢?这里分为两种情况:
当
sub1
的父对象parent也设置了position
属性,且position
的属性值为absolute
或者relative
时,也就是说,不是默认值的情况,此时sub1
按照这个parent
来进行定位。注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以
parent
的哪个定位点来进行定位呢?如果parent
设定了margin
,border
,padding
等属性,那么这个定位点将忽略padding
,将会从padding开始的地方(即只从padding
的左上角开始)进行定位,这与我们会想当然的以为会以margin
的左上端开始定位的想法是不同的。接下来的问题是,
sub2
的位置到哪里去了呢?由于当position
设置为absolute
后,会导致sub1
溢出正常的文档流,就像它不属于parent
一样,它漂浮了起来,在DreamWeaver
中把它称为“层”,其实意思是一样的。此时sub2
将获得sub1
的位置,它的文档流不再基于sub1
,而是直接从parent
开始。如果
sub1
不存在一个有着position
属性的父对象,那么那就会以body
为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。
3. fixed
fixed
是特殊的absolute
,即fixed
总是以body
为定位对象的,按照浏览器的窗口进行定位。
4. static
position
的默认值,一般不设置position
属性时,会按照正常的文档流进行排列。