定位中的绝对定位属性,其绝对定位的参考系是离他最近的定位的祖先元素。如果它所有的祖先都没有定位,则参考系就是document文档根节点。
绝对定位是脱离文档流的,所以,他有一个额外的功能就是使元素拥有布局,清理浮动等。拥有布局的元素,就可以进行元素尺寸的设置,行内元素也可以。
既然绝对定位之后的显示元素,那么其margin就可以设置,所以绝对定位的元素最后的位置是由margin和position的属性共同确定的。取他们的有符号数的和。
一直在语言描述,听起来太模糊,拿一张图,证明下前面说的几种情况吧:
<style type="text/css">
*{margin:0;padding:0;}
.main{width:960px;background:#aaa;position:absolute;top:0px;left:50%;margin-left:-480px;border:1px solid red;}
.p{float:left;height:50px;background:#eee;width:100px;}
</style>
<span class = "main">
<div class = "p">12345678</div>
</span>
图中可以看出几个问题:
1:原本的span元素,它本身是属于行内元素的,但是应用了绝对定位之后,变得像是块级元素了。
2:绝对定位清理了浮动,所以span元素浮动的子元素被包含在其区域内部。
3:可以利用绝对定位和负的外边距进行元素的居中处理(截图有点短,看不出来居中的,有兴趣的自己试试吧)。
4:span元素的宽度大于其子元素的宽度,说明span元素可以设置尺寸了,说明被绝对定位之后,它的display属性受到了影响。
下面做一些修改:把span改为div,position属性改为relative呢?
<style type="text/css">
*{margin:0;padding:0;}
.main{width:960px;background:#aaa;position:relative;top:0px;left:50%;margin-left:-480px;border:1px solid red;margin-top:10px;}
.p{float:left;height:50px;background:#eee;width:100px;}
</style>
<div class = "main">
<div class = "p">12345678</div>
</div>
看下形成了什么样的效果呢》
ie7-的浏览器,拥有了布局,ie8+,FF,Google表现倒是良好。
你是不是以为是relative导致了div拥有了布局?错了,不是relative使元素拥有了布局(relative不会在ie7-的浏览器中,使元素拥有布局的,所以也不会清理浮动,参考另一篇文章 position中z-index问题),而是因为设置了width,才使得元素拥有了布局,在ie的低版本,width,height等都会让元素拥有布局,从而清理了浮动。
额外再加一个绝对定位要注意的情况:
绝对定位的元素的宽度和高度,如果你用的是百分比的话,那么它的参考对象是离他最近的已经定位的父元素。但是其他属性,比如color,text-align等属性,则是继承自它的父元素,如果父元素没有该属性,那么就继续向上查询,父元素的父元素。跟宽度的计算方法是有区别的,有兴趣的可以自己试试哦!
绝对定位的应用一直很广泛,尤其是在处理一些弹出框等问题时,这里对于定位的这些并没有多讨论,并且绝对定位是一个非常博大精深的属性,也不是短短几百字可以描述的。还有很多用处以及要注意的地方,留待以后慢慢整理吧。
同时,如果您发现文中有错误的地方,欢迎指正。感谢!