13-9 Relative与Absolute组合使用
本节编程练习不计算学习进度，请电脑登录imooc.com操作

Relative与Absolute组合使用

小伙伴们学习了12-6小节的绝对定位的方法：使用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定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
 

任务

我也来试一试：我们把右侧任务区中的box4当做是图片的讲解文本。

具体要求：

1、把box4定位到图片(box3)的底部。

效果图如下：

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>相对参照元素进行定位</title>
  7.     <style type="text/css">
  8.     div {
  9.         border: 2px red solid;
  10.     }
  11.  
  12.     #box1 {
  13.         width: 200px;
  14.         height: 200px;
  15.         position: relative;
  16.  
  17.     }
  18.  
  19.     #box2 {
  20.         position: absolute;
  21.         top: 20px;
  22.         left: 30px;
  23.  
  24.     }
  25.  
  26.     /*下面是任务部分*/
  27.     #box3 {
  28.         width: 200px;
  29.         height: 200px;
  30.  
  31.     }
  32.  
  33.     #box4 {
  34.         width: 99%;
  35.  
  36.  
  37.  
  38.     }
  39.     </style>
  40. </head>
  41.  
  42. <body>
  43.     <div id="box1">
  44.         <div id="box2">相对参照元素进行定位</div>
  45.     </div>
  46.     <h1>下面是任务部分</h1>
  47.     <div id="box3">
  48.         <img src="http://img1.sycdn.imooc.com//541a7d8a00018cf102000200.jpg">
  49.         <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
  50.     </div>
  51. </body>
  52.  
  53. </html>
下一节