.containing-block
  .child.static I am statically positioned for reference. I am not pushed to the right.
  .child.relative I am relatively positioned. percentages are calculated based on the width and height of my parent. I am pushed to the right 100%, so the full width of my parent.
  .child.transform I am positioned with transforms, percentages are calculated based on my own width and height. I am pushed to the right 100% of my own width.

.containing-block {
  position: absolute;
  width: 400px;
  background-color: pink;
  border: 2px solid black;
  margin: 50px;
}

.child {
  border: 1px solid black;
  padding: 20px;
  width: 50%;
  background-color: lightblue;
  box-sizing: border-box;
}

.relative {
  position: relative;
  left: 100%;
}

.transform {
  transform: translateX(100%);
}