小伙伴们学习了绝对定位的方法：使用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组合使用的更多相关文章

  1. relative和absolute

    relative 相对定位 1. 幻影瞬移 absolute属性也有瞬移技能,不同之处在于:absolute属性以天空或其他外界限制计算瞬移位置:而relative属性由于是凡人肉体,偏移能力有限,只 ...

  2. 关于relative和absolute的总结

    对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因 ...

  3. relative 和 absolute

    relative总是相对于其最近的父层 absolute总是相对于其最近的定义为relative或absolute的父层

  4. position中多次用到了relative和absolute，能不能具体介绍一下这两者的区别？

    position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...

  5. relative和absolute的效果

    我对这样几个效果不是特别理解: 1.float的效果: 就是搞不清楚我想要什么效果的时候可以将某个标签设置为float,一直没总结出什么规律. 2.relative和absolute的效果: 也是不清 ...

  6. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  7. relative、absolute和float

    relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...

  8. position relative和absolute区别

    看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html 总的来说 这两个属性都是通过增加left和right偏离原来的位置  但 ...

  9. 细谈position属性:static、fixed、relative与absolute

    学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...

随机推荐

  1. c++ new带括号和不带括号

    在new对象的时候有加上(),有不加(),不知道这个到底是什么区别?比如:CBase *base = new CDerived();CBase *base = new CDeviced; 很多人都说, ...

  2. 【HDOJ】1688 Sightseeing

    Dijkstra求解次短路径,使用cnt和dis数组记录最小.次小的个数和长度.重写更新操作. /* 1688 */ #include <iostream> #include <st ...

  3. Spark使用CombineTextInputFormat缓解小文件过多导致Task数目过多的问题

    目前平台使用Kafka + Flume的方式进行实时数据接入,Kafka中的数据由业务方负责写入,这些数据一部分由Spark Streaming进行流式计算:另一部分数据则经由Flume存储至HDFS ...

  4. leetcode实现 “10001”+“1011” 返回二进制相加的结果

    https://oj.leetcode.com/problems/add-binary/ 实” 1 public class Solution { public String addBinary(St ...

  5. Howto Setup yum repositories to update or install package from ISO CDROM Image

    Step # 1: Mount an ISO file Type the following command (replace iso file name with the actual iso fi ...

  6. MT9M021/MT9M031总结

    MT9M021/MT9m031在低光照度下和捕捉移动场景有非常优异的表现,属于近红外摄像头, S1: Aptina's MT9M021/MT9M031 sensor is capable of a m ...

  7. XMPP and Asterisk integration

    http://www.mundoopensource.com.br/en_page_xmpp_asterisk_pratical_example/ www.mundoopensource.com.br ...

  8. openStack云平台虚拟桌面galera mysql 3节点集群实例实战

  9. array_column php 函数 自定义版本 php_version<5.5

    <?php if(!function_exists('array_column')) { /* * array_column() for PHP 5.4 and lower versions * ...

  10. winform 曲线(贝塞尔) 分类： WinForm 2014-12-29 16:52 109人阅读 评论(0) 收藏

    <span style="font-size:14px;">//覆盖OnPaint事件</span> <span style="font-s ...