CSS transformed parent affect child position

Why are child positions affected when you transform the parent?

I want the blue box stay in the bottom right position of the yellow box. But when I translate the red box, the blue box move to his parent.

In real life box-red represents my ui-view in Angular. The views are sliding in and out. I can't change the HTML hierarchy.

See my codepen http://ift.tt/1JLB1Zs

HTML

<div class="box-yellow">
    <div class="box-red">
        <div class="box-blue"></div>
    </div>
</div>

CSS

.box-yellow {
  background-color: yellow;
  position: relative;
  height: 200px;
  width: 200px;
}

.box-red {
  background-color: red;
  height: 100px;
  width: 100px;  
}

.box-blue {
  background-color: blue;
  bottom: 0;
  height: 50px;
  position: absolute;
  right: 0;
  width: 50px;
}

.box-move {
  transform: translateX(100%);
}

via Chebli Mohamed