Which corner will the puppy be in when these CSS rules are applied?

.pen {
  height: 100px;
  width: 100px;
  border: 2px dashed brown;
  position: relative;
}
#puppy {
  position: absolute;
  right: 80px;
  bottom: 0px;
}

<div class="pen">
  <span id="puppy">:dog:</span>
</div>