Placing an image in the corner of another

http://stackoverflow.com/questions/17939063/how-to-display-an-image-in-the-right-top-corner-of-another/17939295#17939295

HTML

<p><img id="base" src="http://exitrealityentertainment.com/wp-content/uploads/2018/03/trstbanner-1.png"><br>
<input type="button" id="action" value="Overlay"><br>
<img id="overlay" src="http://png-3.findicons.com/files/icons/746/kaori/64/butterfly.png">
<p>

CSS

#base {
  width:150px;
}

JavaScript

function overlayImage(element, src, alt) {
   var
      div = document.createElement('div'),
      img = new Image();
   element.parentElement.insertBefore(div, element); // add the div to the parent
   div.style.display = 'inline-block'; // make it behave like an image
   div.style.position = 'relative'; // for absolute position of children
   div.appendChild(element);
   img.src = src;
   img.alt = alt;
   img.style.position = 'absolute';
   img.style.right = 0;
   img.style.top = 0;
   div.appendChild(img);
}


document.getElementById('action').onclick = function() {
   var button = document.getElementById('action'), base, div;
   if (button.value === 'Overlay') {
      button.value = 'Remove';
      overlayImage(document.getElementById('base'), document.getElementById('overlay').src, 'overlaid image!');
   } else {
       button.value = 'Overlay';
       base = document.getElementById('base');
       div = base.parentElement;
       div.parentElement.insertBefore(base, div);
       div.parentElement.removeChild(div);
   }
}