变换属性可作为相对位置

Question

相对于第二个父元素（position: absolute），我想对子元素执行.container。第一父级（.hands）设置了transform: rotate(0deg)，这使其行为类似于position: relative且子级相对于第一父级的位置。为什么会这样？

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ccc;
}

.hands {
  transform: rotate(0deg);
  width: 50%;
  height: 50%;
  background: #fcf;
}

.hand {
  position: absolute;
  bottom: 0%;
}

<div class="container">

  <div class="hands">
    <div class="hand">
      Hand
    </div>
  </div>

</div>

实际上，我需要相对于父级A在元素上执行position: absolute，但首先，我想将具有父级B的子级分组，并在父级B上设置宽度/高度，以便我可以设置儿童相对于父母B的宽度和高度。