DIV相对定位

其实是个很简单的css技巧。这里记录一下基本的思路和具体的用法。

基础：

DIV的定位方法由其position属性来决定，absolute为绝对定位，relative为相对定位。定位的位置则由top、left两个 属性来确定。

无论absolute还是relative，都是相对当前div的最近的一个已定位的祖先元素来定位的。

另外，relative会在html的文档流中占据一定位置；而absolute则不会。也就是说，relative定位相当于word中的“文字 环绕图片”，而absolute则是“图片浮于文字上方”。

思路：

div的相对定位的思路很简单。嵌套的定义两个div；让外层div随页面布局而动，让里层div以外层div为基准进行绝对定位。

用法：

这是从我的工程里摘出来的一段代码。没用的东西我都删去了。

<s:textfield οnfοcus="showImgTip('img_e_no')"
            οnblur="hideImgTip('img_e_no')"/>
           <div style="position: relative;">
            <div id="Layer2"
             style="position: absolute; left: 0px; top: 0px;">
             <img src="<%=basePath%>carChannel/images/tip_engeen_no.jpg"
              border="0" style="display: none;" id="img_e_no" />
            </div>

本文转自 斯然在天边 51CTO博客，原文链接：http://blog.51cto.com/winters1224/798926，如需转载请自行联系原作者