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