谈谈我从事web前端设计对div绝对定位的心得

用技术术语来说，绝对定位允许相对于元素的包含块将元素准确的定位在页面上的任何位置。或者用通俗的来说，它允许相对于“父”元素（例如：div id="footer"）对“子”元素（例如 p id="copyright-date"）进行定位。尽管还可以为position属性定义其他值（static、relative、fixed），现在就只来谈谈绝对定位。

     我们假设一下，编写一组div、p和strong元素。每个元素都相对于标记流中他前面的元素进行定位。这就像是俄罗斯方块游戏，每个块必须放在已经存在的相邻块的顶部或旁边（因为每个元素都有自己的默认位置，前提是你不设置position的时候）。

     正好相反，在使用绝对定位的时候，同样一组元素，每个元素都定义一个相对于包含块（父元素）的绝对定位，而不用考虑标记流的情况。子元素可以并排放置，也可以重叠放置，甚至可以定位到包含块（父元素）外边区域的任何地方。定位的固定属性有top、left、bottom、right、z-index等属性。怎么？不知道什么是位置属性？接下来就开始讲：

     在讨论位置属性之前你先要弄清楚position的属性relative和absolute的区别，relative属性是相对于，通常用于包含块（即父元素）上，而absolute通常用于已经运用了relative属性的包含块内的元素。有点绕口，理解就好！

      top、left、bottom、right等都为位置元素，下哦那个它们的中文意思就可以明白大致意思，这些属性通常使用的单位是px，em，%相对于包含块（即父元素）计算这些属性值的组合。所以，如果子元素的位置是bottom:50px;和left:30px；那么子元素定位在父元素的底部50像素、距离左边30像素的地方。另外，可以混合使用不同的单位，比如bottom:50px和3em。

        好，说了这么多，我们把这些理论实践一下，以下为示例代码：

 1 h2
 2 {
 3 position:relative;      /*为包含块（即父元素）定义属性relative*/
 4 width:100%;             /*为包含块定义宽度为100%*/
 5 height:100em;           /*将高度定义为100个文字的高度*/
 6 }
 7
 8 h2 strong
 9 {
10 position:absolute;                              /*为position定于属性absolute*/
11 top:20px;                                         /*这个显示距离顶部20像素*/
12 left:10px;                                      /*这个显示的是距离左边10像素*/
13 }
        这样的话就初步形成了一个简单的绝对定位的模型，再复杂的定位也是这个原理。html代码如下：

1 <h2>
2 <strong>我得意的笑，这里悬挂在半空中哦</strong>
3 </h2>
       看不到你想要的效果，参照我之前写的“关于css中出现的bug以及修复方法(2)”中的解决方法，设置边框和背景色，就可以看到效果了！

（喜欢学习的和想与我探讨知识的留下你的邮箱或联系方式，或者跟我发邮件，747850255@qq.om.转载请自觉附上转载地址，来自博客园“卢瑟的web”)