当box-size:border-box遇到了position:abslute

今天写样式的时候发现box-size没有起作用，原因是：position: abslute

样式如下：

红色为abslute的div

绿色为普通的div

使用border-sizing:border-box，红色并没有生效

测试代码如下：

<div class="box">
  <div class="innerBox1"></div>
  <div class="innerBox2"></div>
</div>
</body>
<style>
  .box {
      width: 300px;
      height: 300px;
      position: relative;
      background: yellow;
      box-sizing: border-box;
      padding: 12px;
  }
​
  .innerBox1 {
      width: 100%;
      height: 150px;
      position: absolute;
      background: red;
      top: 0;
  }
​
​
  .innerBox2 {
      width: 100%;
      height: 200px;
      background: green;
  }
​
</style>

\