div定位relative和absolute和float测试3

position等于absolute的时候，不一定是相对于浏览器定位，当div存在包含关系时，父div设置成relative，其中包含的div设置成absolute就是相对于该父div的了。
该文测试了下，divall（背景图）这个包裹了六个小div（背景色），并把小div在divall里依次排列，间隔是10px。
定位相关的div写在了行内样式，其他的与测试不太相关的写在了前面的style里。

父div设置了上边距和左边距，距离浏览器留了30px边距。
设置里面的第一排小div绝对定位，top都是10px，距离父div上边是10px。
第二排小div绝对定位，top都是70px。（第一排小div本身高50px，加上第一排的小div的上边距10px，加上第二排和第一排之间需要空出10px，所以是70px。）

float:设置了六个小div都是左浮动，这个浮动也是相对于父div的。
第一列的都是10px.第二列都是120px，第三列都是230px。

具体可查看本文的图示。

测试代码：

 <style>
  body{margin:0px;}
  #divall{margin-top:30px;margin-left:30px;width:340px;height:130px;background-image:url(./images2/bg2.png);}
  #red_div{width:100px;height:50px;background:rgba(255,0,0,0.5);border-radius:20px;text-align:center;}
  #blue_div{width:100px;height:50px;background:blue;text-align:center;}
  #red_div a{text-decoration:none;color:white;line-height:50px;font-weight:bold;}
  </style>
 </head>
 <body>
 <div id="divall" style="position:relative;">
      <div id="red_div" style="position:absolute;left:10px;top:10px;">
      <a target="_blank" href="./indextesthtmagain.html">测试html</a>
     </div>
      <div id="blue_div" style="position:absolute;float:left;left:120px;top:10px;">
      blue
      </div>
      <div id="blue_div" style="position:absolute;float:left;left:230px;top:10px;">
      blue
      </div>

      <div id="red_div" style="position:absolute;left:10px;top:70px;">
      <a target="_blank" href="./indextesthtm.html">纸张html</a>
     </div>
      <div id="blue_div" style="position:absolute;float:left;left:120px;top:70px;">
      blue
      </div>
      <div id="blue_div" style="position:absolute;float:left;left:230px;top:70px;">
      blue
      </div>
</div>

图示：