相对定位

by lai chendong

HTML

<div></div>
<div class="position-relative"></div>
<div></div>

<div class="demo-box">我原来在这</div>


<p>
其实相对定位貌似比较少被单独使用，一般都是只设置position:relative 而不设置top 和 left。这样元素还留在原来的位置上，但是，却已经变成“定过位的元素”了。用来为position:absolute的子孙元素做定位的参考系。
</p>

CSS

div{
  width:100px;
  height:100px;
  background:#666;
  margin:5px;
  display:inline-block;
  opacity:0.5;
}
.position-relative{
  position:relative;
  top:0px;
  left:0px;
}
.demo-box{
  display:block;
  position:absolute;
  background:none;
  border:1px dashed red;
  top:7px;
  left:122px;
}