How to place the fab button on the edge of a div?

Question

On the top of the page, I’ve got a div for which background image has been set. I want to place the fab button on the bottom right edge of this div. Exactly like the following image. How can I do this?

Answer 1

Just use the edge attribute that comes along with fabs:

<ion-fab bottom right edge>
  <button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>

For this to work the div (or any tag) having the fab inside must have position set to relative, absolute or fixed to work, position: inherit may work too depending on parent positioning.

Hope this helps.