Edit in JSFiddle


              
<div class="elem relative">
    <span class="label begin"> &lt;div class="relative"&gt; </span>
    <p>这个元素是相对定位的。如果它是 position: static; ,那么它的绝对定位子元素会跳过它直接相对于html标签(原文这里是:body元素)定位。</p>
    <div class="elem absolute">
    <span class="label begin"> &lt;div class="absolute"&gt; </span>
    <p>这个元素是绝对定位的。它相对于它的父元素定位。</p>
    <span class="label end"> &lt;/div&gt;                </span>
   </div>
    <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;
}

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}