且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

DIV相对定位

更新时间:2022-06-03 07:49:23

其实是个很简单的css技巧。这里记录一下基本的思路和具体的用法。
基础:
DIV的定位方法由其position属性来决定,absolute为绝对定位,relative为相对定位。定位的位置则由top、left两个 属性来确定。
无论absolute还是relative,都是相对当前div的最近的一个已定位的祖先元素来定位的。
另外,relative会在html的文档流中占据一定位置;而absolute则不会。也就是说,relative定位相当于word中的“文字 环绕图片”,而absolute则是“图片浮于文字上方”。
思路:
div的相对定位的思路很简单。嵌套的定义两个div;让外层div随页面布局而动,让里层div以外层div为基准进行绝对定位。
用法:
这是从我的工程里摘出来的一段代码。没用的东西我都删去了。
<s:textfield onfocus="showImgTip('img_e_no')"
            onblur="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,如需转载请自行联系原作者