Relative与Absolute组合使用
小伙伴们学习了绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，
大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
h1{font-size:30px;}
#box3{
position:relative;
top:20px;
left:30px;
width:200px;
height:200px;
}
#box4{
position:absolute;/*只对最接近的并有定位属性的父元素有依赖*/
width:99%;
bottom:0px;
}
</style>
</head> <body>
<h1>下面是演示部分</h1>
<div id="box3">
<img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>
</body>
</html>
效果:
Relative与Absolute组合使用的更多相关文章
- relative和absolute
relative 相对定位 1. 幻影瞬移 absolute属性也有瞬移技能,不同之处在于:absolute属性以天空或其他外界限制计算瞬移位置:而relative属性由于是凡人肉体,偏移能力有限,只 ...
- 关于relative和absolute的总结
对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因 ...
- relative 和 absolute
relative总是相对于其最近的父层 absolute总是相对于其最近的定义为relative或absolute的父层
- position中多次用到了relative和absolute，能不能具体介绍一下这两者的区别？
position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...
- relative和absolute的效果
我对这样几个效果不是特别理解: 1.float的效果: 就是搞不清楚我想要什么效果的时候可以将某个标签设置为float,一直没总结出什么规律. 2.relative和absolute的效果: 也是不清 ...
- [转]关于position 的 static、relative、absolute、fixed、inherit
本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...
- relative、absolute和float
relative.absolute和float position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...
- position relative和absolute区别
看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html 总的来说 这两个属性都是通过增加left和right偏离原来的位置 但 ...
- 细谈position属性:static、fixed、relative与absolute
学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...
随机推荐
- xlslib安装, aclocal-1.13: command not found, 安装升级autoconf-2.65.tar.gz, automake-1.13.tar.gz两个文件
问题1: $ make CDPATH="${ZSH_VERSION+.}:" && cd . && aclocal-1.13 -I m4 /bin/ ...
- Google Map API 学习六
今天其实收货很大的 1.new google.maps.Circle 就是如何在地图上标注一个圆 3.getAnimation 在这里是通过获取Marker是否存在动作,然后如果存在动作的话,就将动作 ...
- DD-WRT相关资源
版本网站下载:Other Downloads,进入betas->2014 FTP下载:如ftp://ftp.dd-wrt.com/betas/2014/06-23-2014-r24461/ Re ...
- PHP_SELF、 SCRIPT_NAME、 REQUEST_URI 区别
$_SERVER[PHP_SELF], $_SERVER[SCRIPT_NAME], $_SERVER['REQUEST_URI'] 在用法上是非常相似的,他们返回的都是与当前正在使用的页面地址有关的 ...
- cocos2d的安装
安装cocos2d其实就是在Xcode中安装几个模板,然后在Xcode里面就可以直接使用这些模板了. 其实说是模板,也就是封装了许许多多引擎的文件,相对于原生的程序,也许使用引擎模板更加方便. 下 ...
- JavaScript高级程序设计17.pdf
导航和打开窗口 使用window.open()方法可以导航到一个特定的URL也可以打开一个新的浏览器窗口,接收4个参数:要加载的URL.窗口目标.特性字符串和一个表示新页面是否取代浏览器历史记录中当前 ...
- hdu1026 Ignatius and the Princess I (优先队列 BFS)
Problem Description The Princess has been abducted by the BEelzebub feng5166, our hero Ignatius has ...
- Huffman树及其应用
哈夫曼树又称为最优二叉树,哈夫曼树的一个最主要的应用就是哈夫曼编码,本文通过简单的问题举例阐释哈夫曼编码的由来,并用哈夫曼树的方法构造哈夫曼编码,最终解决问题来更好的认识哈夫曼树的应用--哈夫曼编码. ...
- [置顶] IOS 基础入门教程
IOS 基础入门教程 教程列表: IOS 简介 IOS环境搭建 Objective C 基础知识 创建第一款iPhone应用程序 IOS操作(action)和输出口(Outlet) iOS - 委托( ...
- Mate8的麒麟950怎么样？ 4个问题待解决
今天下午,华为在上海发布了传闻已久的旗舰智能手机Mate 8.这款手机可以算是国产手机的佼佼者,不光在外观.功能等常规元素上达到旗舰级别,更有特色的是它采用了华为自行研发的手机SOC芯片麒麟950.目 ...