&nbs p;
一、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="zxx.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; h ei ght:120px; background: # f0f3f9; m arg in:40px;">< img src="zxx. jpg " style="pos IT ion:absolute;" /></div>
结果如下图：
您可以狠狠地点击这里：该示例demo
可以说，没有设置定位值的 absolute 元素是个普通又不普通的元素，普通之处在于其依旧在 DOM tree中，对 mar gin 等属性敏感；不普通在于其实际的高 宽 都丢失了。这非常类似于浮动(float)，浮动的本质就是“包裹与破坏”，破坏高度，浮动元素的实际占据高度为 0 （具体点这里）；而 absolute 元素（无定位值）也是“包裹与破坏”，只是其“破坏”比float更加凶猛，不仅实际的高度没有，连实际的宽度也没有。说句不严谨的结论：绝对定位元素就是个比浮动元素更加变态的近亲。
三、绝对定位元素的非绝对定位
从上面一部分我们可以得到两个结论：其一，无定位值的 absolute 元素可以使用 margin 定位；其二，无定位值的 absolute 元素是个没有实际宽度的浮动元素。
这两点很 重要 ，我们可以使用这两个特性实现一些特别的定位效果。两个例子，一是文字投影效果，二是自适应布局。
文字的阴影效果
CSS 3中有 text -s hadow 属性可以实现文字阴影效果，但是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;} HT ML 代码：
<div class="zxx_show"> <span class="zxx_text">这是一段用来测试的文字，看看 是否 有投影效果~~</span> 这是一段用来测试的文字，看看是否有投影效果~~ </div>
您可以狠狠地点击这里：文字投影效果demo
绝对定位元素需要写在投影文字之前，因为 absolute 元素实际占据的高度宽度都是 0 ，所以文字可以自然而然的在其下方显示，由于下方的 文字颜色 较浅，于是便形成投影效果。此方法很精妙，可惜有小小兼容性差异，IE6下投影 方向 是水平朝右，IE7是右上方向，需要hack修复。
自适应布局
没有定位值的 absolute 元素是个更加变态的 float 元素，所以浮动元素干的某些事情 absolute 元素也能做，例如自适应布局。例如face Book 动态 头像 与内容描述就是使用的这个方法。
由于头像的宽度固定，所以对于描述标签，我们可以使用 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属性都有一段故事，需要我们静下心来发现，体会。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-absolute绝对定位的非绝对定位用法 全部内容，希望文章能够帮你解决 html5教程-absolute绝对定位的非绝对定位用法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-absolute绝对定位的非绝对定位用法的详细内容...