absolute绝对定位的非绝对定位用法
来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
absolute绝对定位的非绝对定位用法
by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=608
一、absolute绝对定位的流行用法
一般而言，我们会用absolute绝对定位做什么呢？就是绝对定位，顾名思意，定死在某个位置上。例如，lightbox效果就是使用的绝对定位，例如新浪微博的弹出提示信息，我要转发李冰冰姐姐的微博，结果就会弹出：
还有就是与父relative相对定位标签结合使用，实现相对于父标签的绝对定位效果，例如人人网的搜索下拉菜单效果：
这里用法少不了的是left(right)绝对定位值或是top(bottom)值，否则绝对定位的位置会跟设置了left为0，top为0值一样。好，我这里特意斜体加粗，为什么呢？因为这句话是不正确的，如果您没有意识到，说明您有必要好好看看这篇文章了。
well, 可能别人不是如此，但我对position:absolute的理解，可以说很长一段时间都是不到位的，或者或是一直没有机会好好的静下心来研究，知道个 大概，于是就会有一些错误的认识。其中之一就是上面提到的，position为absolute的元素如果没有设置left, top等值与left:0;top:0;的的效果一样，一样吗？其实不一样。
二、absolute元素的margin定位
absolute定位于margin定位似乎是冤家，某种 定义上讲，两者作用一致，都可以定位，似乎两者水火不容，竞争对手，确实，大部分情况下是，但是没有设置定位数值的absolute元素可以通过 margin来进行定位。举个小例子吧，见下面的代码，一张绝对定位的图片，含margin属性，无left,top等定值数值：
absolute定位与margin定位其实是没有什么冲突的，无论absolute元素时候设置了left/top值，其margin属性值都是可以起作用的。下面展示的是没有left/top值的absolute元素的margin定位。
<img src="http://image.zhangxinxu.com/image/blog/zxx_90_0824.jpg" width="90" height="111" style="position:absolute; margin:50px 0 0 50px;" />
结果如下图：
您可以狠狠地点击这里：该小例子demo
可见absolute元素可以通过margin进行定位。前提就是没有设置left或是top之类的定位数值。我 是这么理解的，对于没有设置绝对定位值的absolute绝对定位元素并没有脱离文档流，依旧在demo中（可能不正确），证据如下：我们再一个普通的 div中（无任何样式）放置一个无绝对定位值的absolute元素，这个元素依旧子啊这个div中，而没有跑到div之外，例如如下的示例代码：
<div style="width:200px; height:120px; background:#f0f3f9; margin:40px;"><img src="http://image.zhangxinxu.com/image/blog/zxx_90_0824.jpg" style="position:absolute;" /></div>
结果如下图：
您可以狠狠地点击这里：该示例demo
可以说，没有设置定位值的absolute元素是个普通又不普通的元素，普通之处在于其依旧在DOM tree中，对margin等属性敏感；不普通在于其实际的高宽都丢失了。这非常类似于浮动(float)，浮动的本质就是“包裹与破坏”，破坏高度，浮 动元素的实际占据高度为0（具体点这里）；而absolute元素（无定位值）也是“包裹与破坏”，只是其“破坏”比float更加凶猛，不仅实际的高度没有，连实际的宽度也没有。说句不严谨的结论：绝对定位元素就是个比浮动元素更加变态的近亲。
三、绝对定位元素的非绝对定位
从上面一部分我们可以得到两个结论：其一，无定位值的absolute元素可以使用margin定位；其二，无定位值的absolute元素是个没有实际宽度的浮动元素。
这两点很重要，我们可以使用这两个特性实现一些特别的定位效果。两个例子，一是文字投影效果，二是自适应布局。
文字的阴影效果
CSS3中有text-shadow属性可以实现文字阴影效果，但是IE对CSS3的支持不佳，所以我们需要想替他的方法实现，absolute+margin是个很好很简单的方法，见下面的效果图，截自Firefox3.5：
相关代码如下：
.zxx_show{padding:20px; background:#f0f3f9; color:#aaaaaa; font-size:14px;}
.zxx_text{position:absolute; margin:-1px 0 0 -1px; color:#333333;}
<div class="zxx_show">
<span class="zxx_text">这是一段用来测试的文字，看看是否有投影效果~~</span>
这是一段用来测试的文字，看看是否有投影效果~~
</div>
您可以狠狠地点击这里：文字投影效果demo
绝对定位元素需要写在投影文字之前，因为absolute元素实际占据的高度宽度都是0，所以文字可以自然而然的在其下方显示，由于下方的文字颜色 较浅，于是便形成投影效果。此方法很精妙，可惜有小小兼容性差异，IE6下投影方向是水平朝右，IE7是右上方向，需要hack修复。
自适应布局
没有定位值的absolute元素是个更加变态的float元素，所以浮动元素干的某些事情absolute元素也能做，例如自适应布局。例如facebook动态头像与内容描述就是使用的这个方法。
由于头像的宽度固定，所以对于描述标签，我们可以使用margin或是padding撑开一段距离，头像使用无定位值的absolute定位，这样就实现了头像与描述的自适应布局效果了。
例如，我的博客个人信息简介处，现在就是使用的float自适应布局，其实将float属性替换成absolute，效果一样的，见下图：
关于absolute的自适应应用，我也做了个demo，您可以狠狠地点击这里：absolute自适应布局demo
下图为demo效果截图：
absolute绝对定位的非绝对定位应用肯定还有其他，只要记住无定位值的absolute元素就是个连实际宽度也没有的float浮动元素就可以了，然后利用这个特性，发挥您的创造力，实现更多更精彩的效果吧。
四、最后的小结
最后，先回答下开始悬而位答的问题：position为absolute的元素如果没有设置left, top等值与left:0;top:0;的的效果为何不一样？相信您应该知道答案了，例如一个div中有个absolute属性元素，其没有left或是 top值，其会像个普通的inline-block属性元素一样静静地呆在这个div里面，但是一旦设置了left:0;top:0;对不起，这个 absolute元素立马变身，直接从DOM tree里面脱离，独立于文档流，结果相对于最近的relative属性的祖先标签定位（如果没有，就body定位）。由于我们平时使用absolute 都离不开left，top之类的值，所以才会概念不清。
每个CSS属性都有一段故事，需要我们静下心来发现，体会。
如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。
原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=608
