Align an ionic button at the bottom right of a div - html

Question

I'd like to place an ionic button at the bottom right of a div. But it doesn't work as I expected. Here is the screenshot:
My html:
Ionic Blank Starter
<ion-slide-box>
<ion-slide ng-repeat="image in images">
<div class="slider-container">
<img ng-src="{{image.src}}" style="width:100%;height:auto;margin:0;display:block" >
<button class="bottom-right button button-positive icon-left ion-home">Home</button>
</div>
</ion-slide>
</ion-slide-box>
The css:
.slider-container {
margin: 0;
padding:0;
position:relative;
}
.bottom-right {
position:absolute;
bottom: 0;
right: 0;
}
Can anybody help? Thanks.

Answer 1

And why not to do it this way?
<ion-slide-box>
<ion-slide ng-repeat="image in images">
<div class="slider-container">
<img ng-src="{{image.src}}" style="width:100%;height:auto;margin:0;display:block" >
</div>
</ion-slide>
</ion-slide-box>
<div class="slider-container">
<button class="bottom-right button button-positive icon-left ion-home">Home</button>
</div>
...moving the button (and the container <div>) out of the slider.

Answer 2

When I needed to put the left and right buttons ("<" and ">") I used class "row" and "col"
<div class="row">
<div class="col col-10">
<button class="button button-block button-icon button-clear ion-chevron-left" ng-click="slidePrevious()"></button>
</div>
<div class="col">
<ion-slide-box on-slide-changed="mudaSlide($index)">
<ion-slide ng-repeat="i in items">
<img class="button " ng-src="{{i.imagem}}" style="width: 128px; height: 128px; padding: 0; border: none; background: none;" ng-click="abreExibecaoImagem($index)"></img>
</ion-slide>
</ion-slide-box>
</div>
<div class="col col-10">
<button class="button button-block button-icon button-clear ion-chevron-right" ng-click="slideNext()"></button>
</div>
</div>
Result