absolut绝对定位的非绝对定位用法

Posted 2020-07-28

一、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 data-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 data-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：

相关代码如下：

css代码：

.zxx_show{padding:20px; background:#f0f3f9; color:#aaaaaa; font-size:14px;}
.zxx_text{position:absolute; margin:-1px 0 0 -1px; color:#333333;}

HTML代码：

<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

（本篇完）