div内的绝对定位

Question

我正在制作我的网站，我想知道是否可以制作这样的东西：

我的HTML看起来像这样：

<div id="box1"><div class="box2"></div></div>

CSS：

#box1{width:300px; height:100px; position:relative; background:#ccc;}
#box1 .box2{width:100px; height:100px; position:absolute; top:20px; background:#999;}

我希望.box2位于距＃box1顶部20px的位置，但是这样它距离页面顶部是20px。任何帮助如何解决这个问题？

由于

Answer 1

您的代码运行正常。 div位于页面的顶部，因此内部div与外部div和页面顶部相距20px。请参阅我的示例http://jsfiddle.net/unD7H/