absouteを指定する時の重なり順がどのように配置されるのか知りたい。

Question

 

    <div class="box">
      <div class="a">
        a
      </div>
      <div class="b">b</div>
    </div>

    <div class="box2">
      <div class="c">
        c
      </div>
      <div class="d">d</div>
    </div>

.box {
  background: red;
  width: 100%;
  height: 200px;
  position: absolute;
  color: #fff
}

.a {
  background: #333;
  width: 100%;
  margin-left: -100px
}

.b {
  background: #999;
  width: 100%;
  margin-left: 100px
}


.box2 {
  writing-mode: vertical-rl;
  color: #000;
  background: blue;
  width: 100%;
  position: relative
}

.c {
  background: #999
}

box2に position: relativeをすると上に位置したのですが。 box2がstaticの状態だと上の要素にabusolute指定したものが上に優先的に配置されるということでしょうか。
通常後続の要素が上の要素と重なると上に配置されるはずだと思いますが。

Answer 1

公式ではありませんがこちらのまとめは参考になると思います。