小伙伴们学习了绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，

大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

  1. <div id="box1"><!--参照定位的元素-->
  2.     <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
  3. </div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

  1. #box1{
  2.     width:200px;
  3.     height:200px;
  4.     position:relative;
  5. }

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

  1. #box2{
  2.     position:absolute;
  3.     top:20px;
  4.     left:30px;
  5. }

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

示例:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>相对参照元素进行定位</title>
  6. <style type="text/css">
  7. div{border:2px red solid;}
  8. h1{font-size:30px;}
  9. #box3{
  10.     position:relative;
  11.     top:20px;
  12.     left:30px;
  13.     width:200px;
  14.     height:200px;
  15. }
  16. #box4{
  17.     position:absolute;/*只对最接近的并有定位属性的父元素有依赖*/
  18.     width:99%;
  19.     bottom:0px;
  20. }
  21. </style>
  22. </head>
  23.  
  24. <body>
  25. <h1>下面是演示部分</h1>
  26. <div id="box3">
  27.     <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
  28.     <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
  29. </div>
  30. </body>
  31. </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. Haskell高阶函数

    Haskell functions can take functions as parameters and return functions as return values. A function ...

  2. BZOJ1610: [Usaco2008 Feb]Line连线游戏

    1610: [Usaco2008 Feb]Line连线游戏 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1301  Solved: 571[Submit ...

  3. cheerio返回数据格式

    通读cheerio API { options: { decodeEntities: false, withDomLvl1: true, normalizeWhitespace: false, xml ...

  4. C# 加密解密（DES,3DES,MD5,Base64） 类

    public sealed class EncryptUtils     {         #region Base64加密解密         /// <summary>        ...

  5. HDU 5922 Minimum’s Revenge 【模拟】 (2016CCPC东北地区大学生程序设计竞赛)

    Minimum's Revenge Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  6. poj3071 Football

    学习位运算在比赛的技巧 http://poj.org/problem?id=3071 Football Time Limit: 1000MS   Memory Limit: 65536K Total ...

  7. Difference Between Primes

    Problem Description All you know Goldbach conjecture.That is to say, Every even integer greater than ...

  8. HDU 3555 Bomb（数位DP）

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) Total Subm ...

  9. Ubuntu 安装vim出错

    在Ubuntu 12.10中安装vim时出现了如下提示: www.linuxidc.com @linuxidc:/etc/apt$ sudo apt-get install vim正在读取软件包列表. ...

  10. spring中解析xml

    解析xml有SAX,Stax,dom等方式,那么spring中是如何解析xml文件的呢? Document doc = this.documentLoader.loadDocument( inputS ...