css - 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/