绝对定位的一些疑问

众所周知,绝对定位absolute是选取其最近的父级定位元素作为参考对象的。假如没有这样的父级元素，将以body作为参考对象。带着这样的假设，写下以下代码：

<div>这是父级容器
<span style="position:absolute;top:0;left:0">绝对定位例子</span></div> 

结果大出所料，绝对定位元素并没有以body作为参考对象进行定位，而是保持其原有位置不变。而当我们进一步指定left与top值时，发现表现终于像我们之前假设一样。

<div>这是父级容器
<span style="position:absolute">绝对定位例子</span></div>

问题出现在哪里，有定位值的绝对定位与没有定位值的绝对定位竟然差异这么大。带着疑问，我们去找答案。在网上看到一些说法，我按照自己的理解就此整理一下笔记。

1、设置了absolute的元素浮动起来了，脱离了文档流，其实际的高度和宽度都不会影响处于文档流中的其他元素。

2、如果没有设置定位值，虽然它脱离了文档流，但由于没有具体的定位值，其所处的位置不会有变化，只是它后继的元素会无视它的存在。

3、如果设置了定位值，它才会选取其最近的父级定位元素作为参考对象而进行定位。

4、就算设置了absolute，margin属性还是能对其起到作用。就此有些很好玩的特效。

文字阴影效果：

<div style="color:#aaa"><span style="color:#333;position:absolute;margin:-1px 0 0 -1px">绝对定位例子</span>

绝对定位例子</div>

转载于:https://www.cnblogs.com/littleG/archive/2011/04/20/2022430.html