Ionic framework : position absolute with bottom in % doesn't work

Question

I am trying to position a <div> absolutely using bottom=50% in an AngularJS/Ionic page as follows:

HTML:

<ion-view title="BoardLine">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">

        <div id="imagecontainer">
            <img id="boardimage" ng-src="{{mainResultImagePath}}" />
            <div id="photocredits" class="rotateimagecredits">
                Image courtesy: {{computed.prophotocredits}}</div>
            </div>
....

CSS:

#imagecontainer {
    position:absolute;
    top:3%;
    left:0;
    right:62%;
    bottom:50%;
}
#boardimage {
    position:absolute;
    left:10%;
    max-width:85%;
    bottom:0;
    height:100%;
}

But just before div id="imagecontainer", Ionic generates a div class="scroll",like below, which has a height of 20px. And the top and bottom css for my imagecontainer refers to this height, but the div class="scroll" has a position:static. Therefore my imagecontainer absolute positioning should refer to the first parent that has a non-static position which should be the <ion-content>

<ion-content class="scroll-content ionic-scroll  has-header">
    <div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
        <div id="imagecontainer">
            <img id="boardimage" ng-src="./img/boards/SD360.jpg" src="./img/boards/SD360.jpg">
            <div id="photocredits" class="rotateimagecredits ng-binding">Image courtesy: john carper</div>
        </div>

Answer 1

I'm not really sure this answers a question, but a valuable information for people struggling with Ionic and absolute position would be that

position: absolute

Has to be used with elements outside of ion-content

So:

<ion-content>
</ion-content>


<div class="bottom">
</div>


.bottom {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

Answer 2

The footer component of ionic is fixed regarding the screen, I think you can try to implement an equivalent one. More info about the footer: http://ionicframework.com/docs/v1/components/#footer

The main css-properties of the element are:

    .bar-footer {
        bottom: 0;
        height: 44px;
    }
    .bar {
        display: flex;
        user-select: none;
        position: absolute;
        right: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 44px;
     }

Modify the above properties with your specific ones (eg. bottom: 50%;) and ensure display is set as absolute.

Considering your parent's positionning issues, you should try to put your piece of code outside <ion-content></ion-content>, inside <ion-view></ion-view>.

It's the only way I succesfully set a button positioned as absolute within ionic mobile framework.

EDIT: /!\ Be careful not to write anything out of <ion-view></ion-view>. My previous answer was creating trouble in the way ionic manages the different pages.