title: How to position a button to the bottom right side of an image?
body: <p>I have an ion slide box and it displays images.  I want to add a button, <code>ion-plus-round</code>, to the bottom right side of the image.  I don't want to add it to the bottom right of the slider, but rather to the bottom right side of the <code>img</code> only. </p>
  
  <pre><code>&lt;ion-slide-box class="item-slide-box"&gt;      
        &lt;ion-slide ng-repeat="image in vm.item.images" ng-cloak &gt;
          &lt;img ng-src="{{image}}"&gt;
  
        &lt;/ion-slide&gt;     
      &lt;/ion-slide-box&gt;
     &lt;a class="button icon ion-plus-round myButton"&gt;&lt;/a&gt;    
  </code></pre>
  
  <p>I have done the following but I am wondering how I can get the button to be <code>float: right</code> inside of the img:</p>
  
  <pre><code>.slider {
  height: 60vh;
  background-color: #76838f;
  position: relative;
  }
  
  .slider-slide {
   color: #000;
   background-color: #76838f;
   height: 100%;
  } 
  
  .slider .slider-slide .img-ng {
      display: block;
      margin-left: auto;
      margin-right: auto;
      height: 100%;
      max-width: 100%;
      position: relative;
  }
  
  .slider .slider-pager {
      bottom: 45px;
  }
  
   .myButton {
      position: absolute;    
      bottom: 0px;
      right: 0px;
  }
  </code></pre>
  
  <p>codepan: <a href="http://codepen.io/anon/pen/gPYBpR" rel="nofollow">http://codepen.io/anon/pen/gPYBpR</a></p>