绝对定位的一些疑问

众所周知,绝对定位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>
posted @ 2011-04-20 16:26  大G  阅读(280)  评论(0编辑  收藏  举报