CSS 相对|绝对(relative/absolute)定位

一、absolute属性的情感化认识

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

二、position:absolute与float:left是近亲

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

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

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

CSS部分：

.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; }
.abs { position:absolute; }

HTML部分：

<div class="div"><img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /><p>无absolute</p>
</div>
<div class="div abs"><img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /><p>absolute后</p>
</div>

结果如下图所示：

代码：

CSS代码：

.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; }.abs { position:absolute; }

HTML代码：

<div class="div"><img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /><p>无absolute</p></div><div class="div abs"><img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /><p>absolute后</p></div>

float也是典型的inline-block化元素，这种元素的inline-block化适用于任何水平的标签。例如平时我们要让span标签支持width属性，可能要设置：

span { display:block; width:100px; }

但是，有float:left/position:absolute撑腰的情况下，display属性就是多余的，可以直接回家喝茶了。

span { float:left; width:100px; }

span { position:absolute; width:100px; }

破坏性
论破坏的功力，绝对定位显然比浮动更甚一筹，但是人们诟病的更多的却是浮动的破坏性。这不难理解，整天在耳边飞来飞去的苍蝇要比不常见的吸血牛虻讨厌。众人已经把浮动当作凡人中的一份子，而对于绝对定位，人们知道，毕竟人家原本隶属天上，能下凡间来帮忙造房子已经不错了，没有必要去苛求指责人家。

浮动的破坏性在于切断line box链，致使高度塌陷，但由于浮动元素仍在凡间（DOM tree），实体是看得见摸得着的，所以其占据的实体位置还是在的。而absolute绝对定位不仅让高度塌陷，又由于从未深入凡间，在凡间没有他的实体位置，所以宽度也是塌陷的。

由于浮动身处凡间，所以其造成的破坏是可以通过其他手段弥补的；但是，绝对定位不属于凡间，其破坏无法修复，因为一是孤独，无人帮忙；二是只有空气，怎能修补。

例如下面的测试：
CSS代码：

.div { padding:20px; margin:10px 0 0 10px; background-color:#f0f3f9; float:left; }
.abs { position:absolute; }

HTML如下：

<div class="div"><img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /><p>图片无absolute</p>
</div>
<div class="div"><img class="abs" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /><p>图片absolute后</p>
</div>

结果如下截图：

可以看到，图片应该的position:absolute属性后，父标签的高宽都塌陷了，连它的兄弟float都救不了。

代码：

CSS代码：

.div { padding:20px; margin:10px 0 0 10px; background-color:#f0f3f9; float:left; }.abs { position:absolute; }

HTML代码：

<div class="div"><img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /><p>图片无absolute</p></div><div class="div"><img class="abs" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /><p>图片absolute后</p></div>

三、position:absolute滥用

在我看来，很多网站，position:absolute都有滥用的嫌疑，不仅仅是position:absolute滥用，其left,top属性值也滥用，relative属性值滥用，z-index也滥用。有的属性滥用就是单纯的多些代码而已；而有些其实可以不使用的地方也使用的话会给后来的扩展和维护造成很大的麻烦的。

relative/absolute/left/top/z-index这5个关系紧密，无论将哪一点都会牵扯到其他。为了避免讲述的混乱，我尽量只讲某一个。例如，这里只讲absolute属性。

absolute经常被一些新手拿来大肆建房子做布局也是可以理解的，貌似什么时候我看过一篇文章说，absolute属性的出现本来是想把页面搞得像photoshop那样，一个图层一个图层覆盖似的。但是，页面的发展显然与这个背道而驰，毕竟页面是活的。确实，像photoshop，把一个个层搞出来，使用absolute属性，以及一定坐标值就可以定位出来了。不需要考虑什么间距啊，margin啊，一些IE下乱七八糟的bug啊什么的，有一了百了的畅快感。尤其对于页面制作不熟悉的新手，这种绝对定位布局可谓屡试不爽。

还有时候，遇到有些复杂的布局，项目经理又催得紧，懒得再去折腾，干脆，直接，绝对定位，先把效果做出来再说。因为绝对定位毕竟有飞翔的能力，例如想在黄浦江中间建个灯塔，直接告知坐标，飞过去，灯塔一插，搞定了，很省事的。

看上去省事，其实是自掘坟墓。所谓“本属天上人，勿管凡间事”，对于普通的页面布局，不到万不得已不要使用absolute进行定位。

对普通的layout，如果动不动就使用absolute属性，我个人是比较深恶痛疾的。

首先自己是个流体布局控，绝对定位这种东西，显然没有流动的气质，尤其拿来定位后（虽然有时候在relative的庇护下也有一定的流动性）。流动性布局很强调不定宽，不定高，活用标签自身属性，顺其自然，最少干预。但是由于absolute属性（尤其是带有left/top值）的破坏性，会导致高宽塌陷，于是，不得已，需要设定一个高度值（或是足以撑开高度的值），例如新浪微博导航就是绝对定位，于是，导航外标签必须定高，否则，下面的元素会上来发生重叠：

其次，自己是个代码控。自己是个有代码癖的人，眼中是容不得可以不使用的CSS属性的。对于absolute布局，为了修复其破坏造成的后遗症而花费的CSS代码开销在我看来已经超出的容忍的限制。

最后，也是更重要的，就是绝对定位大大降低了页面的扩展性和维护性。其在降低维护性方面的卓越表现不仅仅在于自身，还在于其领导能力（指引领relative与z-index制造更加混乱的页面，这个后面会依次讲到）。我想有经验的页面重构人员都深有体会，去改之前别人写的页面，出现问题的很多时候就是那些不知道为什么要绝对定位的元素，这些元素就像地雷一样，总以为安全，放心大胆地往前走，结果，“砰”一声嗝屁了。覆盖，重叠，精确调距离，修改之前的高宽参数等，想想都让人吐槽。最后，越改越混乱。

absolute属性本来是个好孩子，可做奇兵，颇有妙用。但是，太多人把天上的凤凰当野鸡养，把absolute过多的用于普通布局，而沉浸其中，不亦乐乎。

其实想想，要求也不能那么高。毕竟大部分的同行都是做中小站点的，一个页面寿命短短几个月说不定就要抄底重来。花功夫去折腾扩展性，代码量什么的，实在是对不起自己那点可怜的工资，有这点闲功夫还不如去撩撩美女姐姐，泡泡清纯小妹呢。所以，淡定，淡定！

不过，一些结论性的话还是要说的：想重构高质量的页面，少用绝对定位布局！

四、鞋子是用来穿的

又是题外话。对于CSS属性，如何高效地使用它们，如何使页面流畅，灵动，又极具扩展性和可维护性呢？就是该生下来该干嘛的就让他干嘛。就拿绝对定位举例，absolute最大最能动的空间是在天空中，不受任何限制的天空，可以自由驰骋，又与世隔绝，不会对凡间造成任何侵扰，顶多遮住点阳光。所以，absolute尽量不要身陷林立的DOM中，尤其是用来做普通的布局，这可真是拿砍刀削指甲，做着危险的活儿啊。

举个更容易理解的例子吧。我们都知道鞋子是用来穿的。但是，它还有其他功能，比如说攻击武器，例如嫌小布什台上讲话语速太快跟不上，听不懂，你就可以掷出你的飞鞋提醒他降低语速。很显然，虽然鞋子有做武器这个特殊功能，你是不会去淘宝上买个百八十双鞋子，专门用来扔人的吧！absolute属性的使用一个道理。

一、常见absolute布局的替代实现方案

absolute属性配合left/top/right/bottom属性具有极强的定位性。这种功能特性是如此的明显与强烈，可能会让页面重构人员很单纯的被这一特性“捕获”，而产生迷失。

一板一眼的描述可能难以理解，举个通俗点的例子吧：
一个脸蛋不错身材超好的姑娘穿上超PP的衣服后是如此的光艳动人，对于我们这类常年困居于深宅大院的光棍男来讲，这种美艳是如此的迷人，以至于我们的精力多集中在这沉鱼落雁的美貌上，而忽略了其他一些东西，例如知性，善良，贤惠等。很容易的，我们以后一想到此女子，第一反应就是“美貌”，至于其他，在如此美貌下已经不重要了。

此道理反映在web上就是，我们极易先入为主地认为absolute的价值就是借助left/top属性来进行定位的。说句不严谨的话，目前估计超过90%的普通布局中的absolute属性都是用在定位上了。恩，这个回头再说，这里还是看看一些常见的absolute布局如何通过使用其他属性完成同样的布局效果。既然absolute属性是拿来定位，我们只要使用其他属性定位就可以了。此时，自然而然想到了CSS中另外一个更加低调全能的定位属性margin，下面的前两个例子都是使用margin代替absolute及相关属性。

京东商城首页标价定位
首先拿京东商城首页的一个标价样式举例，见下截图：

用小bug一看其code实现，果然是绝对定位+定位属性：//zxx:小bug时我对firebug的昵称

要是我来实现，就不会使用absolute属性，会使用margin实现扩展性容错性更强的布局。

不管怎样，先看对比实现效果，您可以狠狠地点击这里：absolute/margin定位布局对比demo

下图为在IE7浏览器下的上下实现方式对比截图（默认）：

可见使用margin，可以实现与absolute布局一样的效果，且CSS属性使用量折半，更为关键的是，布局的扩展性与容错性大大增强了。

在demo页面上的底部有两个测试布局扩展性与容错性的按钮，如下图，第一个按钮是改变标签的宽度，第二个按钮是改变父标签的position属性为static：

我们点击第一个按钮改变dl父标签的宽度后，结果absolute定位的标价已经和图片远离了，而使用margin定位的橙红色背景标价依旧坚挺地呆在原来的位置上，如下图所示：

点击第二个按钮改变父标签的position属性为static后，结果使用absolute绝对定位的标价没有了束缚，直接跑到浏览器窗口的右下角去了，而margin定位没有丝毫影响（如下图所示，截自Firefox3.6）：

从上面两个简单的测试可以看出两种实现方式见扩展性和容错性方面的差异。

下面简单讲下相关布局的实现，以下是原来absolute实现的相关代码：
HTML部分：

<dl><dt class="p-img"><a href="##"><img width="130" height="130" src="http://img10.360buyimg.com/n3/834/11752677-6197-4ffa-b4c0-e66d02640bad.jpg" /></a><div class="p-price">￥999.00</div></dt><dd class="p-name"><a href="##">LG  GD580  3G手机 300万像素 999返100元券！</a></dd>
</dl>

类名为”p-price”标签核心样式如下：

.p-price {position: absolute;bottom: 10px;right: 50px;  ......

京东商城的实现，中规中矩，想这种带有覆盖效果的定位，使用absolute定位估计是大部分页面重构人员的首选。但是，绝对定位之“绝对”一词本身就意味着其在扩展性方面的表现受限。如果我们要求更高，可以使用CSS代码量更少，扩展性更强的margin布局。

其实现代码如下：
首先HTML部分需要添加一层block水平的标签（其实可以不用加，只要让img外面的a标签block水平显示即可），让标价与图片不会在一个line box中显示，同时将标价外面的div标签改为inline水平元素的标签方便inline-block化，于是，最后的HTML代码如下：

<dl><dt class="p-img"><a href="##"><img width="130" height="130" src="http://img10.360buyimg.com/n3/834/11752677-6197-4ffa-b4c0-e66d02640bad.jpg" /></a><div class="new-price-x"><span class="new-price">￥999.00</span></div></dt><dd class="p-name"><a href="##">LG  GD580  3G手机 300万像素 999返100元券！</a></dd>
</dl>

二、absolute可以一个人战斗

如果在CSS的世界中没有left/top/right/bottom属性，absolute的潜力估计会挖得深得多。

我们需要意识到，一个应用的position:absolute的元素，其实就只是个非常普通的元素，我感觉与应用了float:left的差异仅仅在于宽度的缺失。为说明此观点，我做了个很简单的demo.

此demo默认如下图，可以看到浮动的高度缺失造成的塌陷：

点击示意的按钮后，可以发现图片还是那个图片，还在那个位置，还是那么的安静与优雅。唯一变化的就是文字们有的跑到它的下面了（宽度缺失）。

由此可见，absolute属性只是个很普通的属性，跟float:left是个近亲。一个是陨落凡间的恶魔，一个是天空中的恶魔。所以，很多时候，我们在普通布局中使用absolute时候，只要设置position:absolute就可以了，至于left/top之类的都是浮云，定位什么的就当作普通元素，使用margin定位一样有着刮目的表现的。

三、absolute与left/top等属性之间的关系

单纯应用了absolute属性的元素就是个普通元素，跟变身前的美少女战士一样。left/top等属性是具有变身性质的东西，是恶魔absolute元素的翅膀。absolute元素一旦应用了left/top等属性，就具有了飞翔的能力，奔向天空自由驰骋，如果没有relative属性的限制，其会一直飞到天空的边缘（浏览器窗口），并且具有非常明确的方向性。

四、body标签是absolute元素自由的天空

来首小诗调节一下吧：
生命成可贵，
爱情价更高。
若为自由故，
两者皆可抛。

知道《美少女战士》吧，知道主人公水冰月（月野兔）吧，因为人家牛叉，所以为了保护地球，保护未来而战斗。知道《火影忍者》吧，你说要是把鸣人就限制在火影村，帮助老太太抓抓猫，帮助欧巴桑照看孩子，能有大成吗？人家是注定要肩负起忍者世界和平的职责的。

同样的，要是把绝对定位属性用在很深的DOM tree中，再用relative限制住。其实就是把鸣人当作看孩子的人使用，虽然用的时候觉得很好用，但是实际上是埋没了绝对定位元素的才能。没有限制，给予足够的自由，广阔的天空才是绝对定位元素大放异彩，拯救人类的舞台。

一般而言，在web页面上，最宽广的天空莫过于body标签，所以，在我看来，把绝对定位元素直接放在body标签下才是王道，才能最大限度的发挥绝对定位元素的才能。举个例子，淘宝首页顶部小横条上的下拉。

此下拉就是使用的绝对定位，但是却是深深地嵌入到DOM中的，如下图：

这种方法的好处在于简单，对于非IE6浏览器直接使用CSS就可以实现效果了。然而，将默认隐藏的绝对定位元素被relative限制在很深的DOM节点中，弊处相当多：首先增加了DOM的复杂度，不利于维护；越深的DOM元素，造成了回流越强；因为父标签需要relative限制，增加了CSS代码的消耗量；隐藏元素头部加载，延迟了页面的呈现速度；每个下拉几乎都要重新定位，其重用性受限。

如果是我，一定会把这些隐藏的绝对定位元素放在在body标签内部，且最底部加载，以提高页面的呈现速度，甚至根本就不加载。此做法就是mtime时光网下拉导航的做法，是推荐的做法。绝对元素的定位不是通过当前触发元素的relative限制，而是在body大环境中，直接通过触发元素的偏移值设定位置，是最直接最高效的做法。

在body标签下自由驰骋，这才是绝对定位元素真正应该呆的地方。真正有才华的元素应该放在更大的舞台上，限制在蹩脚的角落里注定要埋没的。我之前写过一个名为”powerFloat“的万能浮动插件，就是希望通过降低使用的学习成本，让大家都把绝对定位元素解放到body标签下。

于是乎，我们不用担心什么层级错乱的破问题，不会再看到密密麻麻错乱的HTML代码。做页面重构的，本来就应该是每天喝喝咖啡，跟美女前台打情骂俏的工作，现在却搞那么辛苦，太不应该了。

absolute元素犹如有翅膀的小鸟，你是把它限制在鸟笼中，还是把它放飞到天空中自由的飞翔？我想，一切不言而喻。