为什我的效果不对

绝对定位，没有已经定位的祖先元素，我的绝对定位的box2显示不对。

下面是我的代码

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       .box1{background: red;height: 300px;}
       .box2{background: green;height: 100px;position: absolute;}
       .box3{background: blue;height: 300px;left: 50px;top: 30px;}
       .box{background: yellow;height: 80px;}
   </style>
</head>
<body>
   <div class="box1">box1</div>
   <div class="box">
       <div class="box2">dgdgdfgdgd</div>
   </div>
   <div class="box3">box3</div>

</body>
</html>