DIV相对定位

简介:
其实是个很简单的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,如需转载请自行联系原作者
相关文章
|
3月前
div盒子垂直居中的3种方法
div盒子垂直居中的3种方法
30 2
|
12月前
div盒子水平垂直居中以及表格的居中的方法
div盒子水平垂直居中以及表格的居中的方法
113 0
|
前端开发
div文字居中
div文字居中
让里面的DIV上下左右居中在外面的DIV里
让里面的DIV上下左右居中在外面的DIV里
45 0
|
前端开发 容器
CSS样式(三) - div盒子
CSS样式(三) - div盒子
146 0
CSS样式(三) - div盒子
|
前端开发
div 居中方法汇总
居中问题无论在工作还是在面试中, 都是很常见的 下面我来给大家总结几种常用的方法, 大家可根据实际情况选择 好了, 废话不多说, 先看下效果 法1 定位+偏移 (margin) html css .
1019 0
div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用。 一、盒子没有固定的宽和高 方案1、Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。
1806 0
|
前端开发 容器
DIV垂直居中对齐
效果图: CSS: #container{ display:table-cell; width:300px; height:300px; vertical-align:middle; bo...
965 0