Edit in JSFiddle

<div class="elem relative1">
    <span class="label begin"> &lt;div class="relative1"&gt; </span>
    <p>relative 表现的和 static 一样，除非你添加了一些额外的属性。</p>
    <span class="label end"> &lt;/div&gt; </span>
</div>

<div class="elem relative2">
    <span class="label begin"> &lt;div class="relative2"&gt; </span>
    <p>在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。</p>
    <span class="label end"> &lt;/div&gt; </span>
</div>

.elem{
    border:solid #6AC5AC 3px;
    position:relative;
}

.label{
    position:absolute;
    background-color:#6AC5AC;
    line-height:1em;
    padding:3px;
}
.begin{
    left:0;
    top:0;
}
.end{
    right:0;
    bottom:0;
}
p{
    margin:2em 0;
    display:block;
}

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}