CSS 相对|绝对定位 张鑫旭博客

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1287

absolute属性的情感化认识

我对position:absolute属性感性化的认识：absolute是一个善良的有个性的，我行我素、喜欢凌驾一切之上的魔鬼。这家伙，不喜欢也算不上讨厌，但是知道没事最好少招惹，免有后患。

position:absolute与float:left是近亲

先给大家讲个故事吧。曾经有两个魔鬼兄弟，一个叫浮动，一个叫绝对定位，它们总是一起在空中飞行戏耍的。但是，不幸的是，有一天，浮动被巨雷击中，双翼折损，陨落凡间，好在性命还在，但是，翅膀不在，它只能永远留在凡间，与芸芸众生呆在一起。偶然一天，众生发现浮动有一种能力，可以让布局整齐，有方向性的排列，于是，大肆使用其能力，建房子，造家园。但是，浮动本质上是魔鬼，其破坏性经常让房子高度塌陷，而饱受众生诟病。可怜的浮动啊，原本出身的意义就不是来建房子的，却被众人误解与指责。浮动的兄弟绝对定位本应在天空翱翔，但是为了看望其兄弟，也经常去凡间看望。后来，人们发现，绝对定位也有布局建房子的能力，也想拿来使用。但是，绝对定位不同于浮动，其翅膀尚在，其一个不乐意就可以飞回天空。聪明而狡黠的人们发现了一个可以限制绝对定位的物体，名叫相对定位。于是，什么时候，人们想利用绝对定位建房子，就使用这个名叫相对定位的东西把他限定住。后来，有一天，人们忍不住心中的疑问，就问绝对定位：“你在天上好好的，为什么没事要下来受罪呢？”绝对定位长吁一口气，道出了浮动就是他那可怜的弟弟的事情。“不会吧！”人们很惊讶，“你们样貌差异这么大，跟志玲姐和凤姐之间的差异有得一拼呢！”“唉”绝对定位又是一声叹气，“被雷击，翅膀没了，还毁了容，于是……”绝对定位忍不住抽泣起来。后来，人们逐渐明白，原来绝对定位下凡间帮着建房子都是自愿的。果然，后来，一部分人试着不再使用叫做相对定位的东西限制绝对定位，绝对定位也没有飞向天空……（未完，待续）

故事先说到这儿，正如故事里提到的，position:absolute与float:left论长相差别有志玲姐和凤姐那么大，但是，却是近亲，细想一下也合情合理，两者有两大共性：包裹性，破坏性。

包裹性
包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。哦，举个例子吧，如下测试代码：