绝对定位的一些疑问
众所周知,绝对定位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>