企业网站建设中经常要用到绝对定位，这家伙在定位界中优先级别高，但是用起来却并不复杂。

 

何为绝对定位box? 由position为absolute或fixed的dom元素产生的box，我们称之为绝对定位box。这类box是如何进行绝对定位的？position为absolute或是fixed会产生不同的效果吗？我们现在就去看看。
 

 

一. position为absolute的绝对定位box

用法：设置position为absolute，选定一个离它近的父级定位box(第25条)作为它的containing block(第11条)，利用left/right/top/bottom(用法请参考这里) 来相对containing block作一定的偏移（当然，你也可以不偏移）。

 

会不会有童鞋会问，如果绝对定位box没有父级定位box怎么办？嗯....有道理，网站在制作是有可能出现的。

 

你要相信CSS开发小组！他们有设置备胎的。

 

如果绝对定位box没有父级定位box，那么它的containing block就是initial containing block(第10条)。
 

 

二. position为fixed的绝对定位box

用法：设置position为fixed，以initial containing block作为它的containing block, 利用left / right / top / bottom 来相对containing block作一定的偏移。

 

特点：在continuous media(看第1条)上，不管怎样滚动网页，该box的位置始终保持不变。道理很简单，因为initial containing block的位置是不会变化的！当然，如果某个position为absolute的box是以initial containing block为定位box，也会有同样的效果。

 

 

三、绝对定位与浮动进行比较
 

在企业网站建设中的共同点是： 都脱离了普通流。

 

不同点在于各自脱离的程度。

 

浮动虽然脱离了普通流，但它却在一定程度上影响着普通流box的布局，诸如一言不合就占据别人的地盘，挡住下方的block-level box，诱惑一堆文字围绕在旁等等。

 

而绝对定位，只会根据参照物去作一定的偏移，即使有时候会遮挡住其他box。它是从骨子里完全脱离了普通流，丝毫不会影响普通流box的布局！


总体看来，绝对定位是不是比浮动容易理解多了，在企业网站建设中绝对定位用的很多，一定要弄懂绝对定位是什么意思，怎么操作。