position的absolute属性

定位中的绝对定位属性，其绝对定位的参考系是离他最近的定位的祖先元素。如果它所有的祖先都没有定位，则参考系就是document文档根节点。

绝对定位是脱离文档流的，所以，他有一个额外的功能就是使元素拥有布局，清理浮动等。拥有布局的元素，就可以进行元素尺寸的设置，行内元素也可以。

拥有布局的元素，就可以设置元素的尺寸，所以绝对定位的元素，不论它本身的属性是行内元素还是块级元素，它的表现形式都变得和块级元素一致。绝对定位的元素会影响display的效果;

既然绝对定位之后的显示元素，那么其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>

看下显示图吧，测试在ie（6-9）,Goggle,FF浏览器，表现都挺好

图中可以看出几个问题：

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等属性，则是继承自它的父元素，如果父元素没有该属性，那么就继续向上查询，父元素的父元素。跟宽度的计算方法是有区别的，有兴趣的可以自己试试哦！

绝对定位的应用一直很广泛，尤其是在处理一些弹出框等问题时，这里对于定位的这些并没有多讨论，并且绝对定位是一个非常博大精深的属性，也不是短短几百字可以描述的。还有很多用处以及要注意的地方，留待以后慢慢整理吧。

同时，如果您发现文中有错误的地方，欢迎指正。感谢！