position 有三个值,static(静态)、relative(相对)、absolute(绝对);由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定义。对于后两者,一般应用:在一个相对定位的元素里面放置一个绝对定位的元素,如图:
![](https://i-blog.csdnimg.cn/blog_migrate/6d46e99ef38af0c4ccb714e25d3d4a2a.gif)
子元素B可以通过top、right、bottom、left来精确定位,定位的参考目标就是其具有相对定位属性的父级元素A;并且设置这些偏移后,产生的空隙会被后面的元素填充(如果后面的元素足够尺寸的话)。由于B元素具有absolute定位属性,相当于从文档流中抽取出来,浮动在原平面排版上,形成“层”,如果有多个“层”,层与层之间就必然会有谁覆盖谁,谁在上谁在下的竞争关系,因此,为解决这个竞争,就产生了 z-index(空间坐标系的Z轴)属性,谁的值大,谁就在上面。另外,如果父级元素A没有设置relative,那么B元素就会以body标签当作参考点。
对于具有position:relative属性的元素A,其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为参考点,而不是像上面说的,以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙,其周围的元素并不会填充这些空隙,即使它们足够尺寸(演示)。
值得注意的是,此时元素A的margin,margin将作用于该元素的原来位置,由于原位置产生偏移,该元素的最终位置将是margin与top、right、bottom、left共同作用后的位置,并且其周围元素的位置也将产生影响。
回过头来再看看 relative 里面的 absolute,比如上面的A、B两个元素,如果两个元素都设置了top、right、bottom、left,对于元素B来说,其位置偏移的参考点是元素A偏移后的位置,不是元素A的原位置,同样,如果元素B有margin,其参考点也是元素A偏移后的位置,这点很重要,这才是absolute的概念 (演示)。
=======================================================
用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值: static、fixed、absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。
但是,怎么个绝对法,又怎么个相对法呢?以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。今天我特意测试了一下,得出了以下结论:
1、当Position属性值为Relative时
对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置
Top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时,只有Top起作用。
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在时,只有left起作用。
2、当Position属性值为absolute时
对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。
在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。
![](https://i-blog.csdnimg.cn/blog_migrate/0d966792a804bca234a56b56ba0b96a5.jpeg)