title: Ionic framework : position absolute with bottom in % doesn't work
body: <p>I am trying to position a <code>&lt;div&gt;</code> absolutely using <code>bottom=50%</code> in an AngularJS/Ionic page as follows:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ion-view title="BoardLine"&gt;
    &lt;ion-nav-buttons side="left"&gt;
      &lt;button menu-toggle="left" class="button button-icon icon ion-navicon"&gt;&lt;/button&gt;
    &lt;/ion-nav-buttons&gt;
    &lt;ion-content class="has-header"&gt;
  
          &lt;div id="imagecontainer"&gt;
              &lt;img id="boardimage" ng-src="{{mainResultImagePath}}" /&gt;
              &lt;div id="photocredits" class="rotateimagecredits"&gt;
                  Image courtesy: {{computed.prophotocredits}}&lt;/div&gt;
              &lt;/div&gt;
  ....
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#imagecontainer {
      position:absolute;
      top:3%;
      left:0;
      right:62%;
      bottom:50%;
  }
  #boardimage {
      position:absolute;
      left:10%;
      max-width:85%;
      bottom:0;
      height:100%;
  }
  </code></pre>
  
  <p>But just before <code>div id="imagecontainer"</code>, Ionic generates a <code>div class="scroll"</code>,like below, which has a height of 20px. And the top and bottom css for my <code>imagecontainer</code> refers to this height, but the <code>div class="scroll"</code>  has a <code>position:static</code>. Therefore my <code>imagecontainer</code> absolute positioning should refer to <strong>the first parent that has a non-static position</strong>
  which should be the <code>&lt;ion-content&gt;</code></p>
  
  <pre><code>&lt;ion-content class="scroll-content ionic-scroll  has-header"&gt;
      &lt;div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);"&gt;
          &lt;div id="imagecontainer"&gt;
              &lt;img id="boardimage" ng-src="./img/boards/SD360.jpg" src="./img/boards/SD360.jpg"&gt;
              &lt;div id="photocredits" class="rotateimagecredits ng-binding"&gt;Image courtesy: john carper&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>