title: $mdtoast position bottom of page on scroll
body: <p><a href="https://i.stack.imgur.com/kOVv2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kOVv2.png" alt="mdtoast not at bottom of page"></a>    </p>
  
  <pre><code>$scope.addPlaylist = function(song) {
        $scope.playlist.push(song);
        var el = angular.element(document.body);
        $mdToast.show(
          $mdToast.simple()
            .textContent(song.title + ' added to playlist.')
            .position('bottom')
            .hideDelay(3000)
            .parent(el)
        );
      }
  </code></pre>
  
  <p>I am not experienced with CSS and position properties and have just started using angular material. I am trying to make use of the mdtoast service but cannot get it to position correctly at the bottom of the page.</p>
  
  <p>Even after setting the element to document.body the position of the mdtoast hovers in the middle of the page when I scroll down, as shown in the attached capture. How can I make it pop out from the bottom of the page even after scrolling.</p>
  
  <p>The relevant html code :</p>
  
  <pre><code>&lt;md-toolbar class="md-theme-indigo"&gt;
      &lt;div class="md-toolbar-tools"&gt;
          &lt;a ui-sref="player.songs"&gt;&lt;img src="assets\images\music-player.png" width="50px" height="50px"&gt;&lt;/img&gt;
          &lt;/a&gt;
          &lt;md-button class="md-icon-button" aria-label="play" ng-click="stopSong()" ng-show="isPlaying"&gt;
              &lt;md-icon md-svg-icon="assets/icons/clear.svg"&gt;&lt;/md-icon&gt;
              &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                  Stop
              &lt;/md-tooltip&gt;
          &lt;/md-button&gt;
          &lt;md-button class="md-icon-button" aria-label="play" ng-click="resumeSong()" ng-show="isPaused"&gt;
              &lt;md-icon md-svg-icon="assets/icons/play.svg"&gt;&lt;/md-icon&gt;
              &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                  Resume
              &lt;/md-tooltip&gt;
          &lt;/md-button&gt;
          &lt;md-button class="md-icon-button" aria-label="pause" ng-click="pauseSong()" ng-show="isPlaying &amp;&amp; !isPaused"&gt;
              &lt;md-icon md-svg-icon="assets/icons/pause.svg"&gt;&lt;/md-icon&gt;
              &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                  Pause
              &lt;/md-tooltip&gt;
          &lt;/md-button&gt;
          &lt;md-button class="md-icon-button" aria-label="repeat" ng-click="enableLoop()"&gt;
              &lt;md-icon md-svg-icon="{{repeat_icon}}"&gt;&lt;/md-icon&gt;
              &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                  Repeat
              &lt;/md-tooltip&gt;
          &lt;/md-button&gt;
          &lt;span flex&gt;&lt;/span&gt;
          &lt;h3 hide show-gt-sm&gt;Music Player&lt;/h3&gt;
          &lt;span flex&gt;&lt;/span&gt;
          &lt;md-button ui-sref="player.radio" class="md-icon-button" aria-label="radio" ng-show="state === 'songs'"&gt;
              &lt;md-icon md-svg-icon="assets/icons/radio.svg"&gt;&lt;/md-icon&gt;
              &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                  Go To Radio
              &lt;/md-tooltip&gt;
          &lt;/md-button&gt;  
          &lt;md-button ui-sref="player.songs" class="md-icon-button" aria-label="songs" ng-show="state === 'radio'"&gt;
              &lt;md-icon md-svg-icon="assets/icons/queue_music.svg"&gt;&lt;/md-icon&gt;
              &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                  Go To Songs
              &lt;/md-tooltip&gt;
          &lt;/md-button&gt;  
          &lt;md-menu md-position-mode="target-right target" hide-gt-sm&gt;
              &lt;md-button class="md-icon-button" aria-label="controls" ng-click="$mdOpenMenu($event)"&gt;
                  &lt;md-icon md-svg-icon="assets/icons/settings.svg"&gt;&lt;/md-icon&gt;
              &lt;/md-button&gt;
              &lt;md-menu-content width="6" layout-padding&gt;
                  &lt;label&gt;&lt;md-icon md-svg-icon="assets/icons/volume_up_black.svg"&gt;&lt;/md-icon&gt;&lt;/label&gt;
                  &lt;md-slider md-discrete ng-model="player.volume" step="0.1" min="0.0" max="1" aria-label="volume"&gt;&lt;/md-slider&gt;
                  &lt;label ng-if="!isRadio"&gt;&lt;md-icon md-svg-icon="assets/icons/fast_forward_black.svg"&gt;&lt;/md-icon&gt;&lt;/label&gt;
                  &lt;md-slider md-discrete ng-model="player.currentTime" step="1" min="1" max="{{player.duration}}" aria-label="seek" class="md-primary" ng-if=!isRadio&gt;&lt;/md-slider&gt;
              &lt;/md-menu-content&gt;
          &lt;/md-menu&gt;
          &lt;md-menu md-position-mode="target-right target" layout="column" layout-align="center center"&gt;
              &lt;md-button class="md-icon-button" aria-label="controls" ng-click="$mdOpenMenu($event)"&gt;
                  &lt;md-icon md-svg-icon="assets/icons/apps.svg"&gt;&lt;/md-icon&gt;
                  &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                      Apps
                  &lt;/md-tooltip&gt;
              &lt;/md-button&gt;
              &lt;md-menu-content width="2"&gt;
                  &lt;md-button ui-sref="reddit"&gt;&lt;span md-menu-align-target&gt;Reddit&lt;/span&gt;&lt;/md-button&gt;
                  &lt;md-divider&gt;&lt;/md-divider&gt;
                  &lt;md-button ui-sref="player.songs"&gt;&lt;span md-menu-align-target&gt;Music&lt;/span&gt;&lt;/md-button&gt;
              &lt;/md-menu-content&gt;
          &lt;/md-menu&gt;    
      &lt;/div&gt;
  &lt;/md-toolbar&gt;
  &lt;md-progress-linear class="md-warn md-hue-3" md-mode="determinate" value="{{progress}}" ng-if="!isRadio"&gt;&lt;/md-progress-linear&gt;
  &lt;section layout="row" layout-fill&gt;
      &lt;md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')"&gt;
          &lt;md-toolbar class="md-theme-indigo"&gt;
              &lt;md-sub class="md-toolbar-tools"&gt;Status&lt;span ng-show="isPaused"&gt;&amp;nbsp;&lt;span class="md-caption"&gt;Paused&lt;/span&gt;&lt;/span&gt;&lt;/h1&gt;
              &lt;span flex&gt;&lt;/span&gt;
              &lt;md-button class="md-primary" aria-label="play_all" ng-hide="!playlist.length" ng-click="nextSong()"&gt;{{isPlaying ? 'Next':'Play All'}}&lt;/md-button&gt;
          &lt;/md-toolbar&gt;
          &lt;md-content layout="column" ng-show="isPlaying" layout-align="center center" layout-padding&gt;
              &lt;md-subheader class="md-primary"&gt;{{playing}}&lt;/md-subheader&gt;
          &lt;/md-content&gt;
          &lt;md-divider&gt;&lt;/md-divider&gt;
          &lt;md-content layout="column" layout-padding&gt;
              &lt;img src="assets/images/yeoman.png" width="130px;" height="100px;" style="margin-left: auto;margin-right: auto;" ng-hide="playlist.length"&gt;
              &lt;p class="md-caption" style="margin-left: auto;margin-right: auto; text-align: center;" " ng-hide="playlist.length"&gt;Add to this playlist by clicking the &lt;md-icon md-svg-icon="assets/icons/menu_black.svg" style="color: #0F0;" aria-label="Alarm Icon"&gt;&lt;/md-icon&gt; icon in the listing and selecting "Add To Playlist"&lt;/p&gt;
              &lt;div layout="row"&gt;
                  &lt;h3 class="md-title" style="color: green;" ng-show="playlist.length"&gt;Next Up&lt;/h3&gt;
                  &lt;span flex&gt;&lt;/span&gt;
                  &lt;md-button class="md-fab md-mini md-warn" aria-label="clear_all" ng-hide="!playlist.length" ng-click="clearPlaylist()"&gt;
                      &lt;md-icon md-svg-icon="assets/icons/clear_all.svg"&gt;&lt;/md-icon&gt;
                      &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                          Clear Playlist
                      &lt;/md-tooltip&gt;
                  &lt;/md-button&gt;
              &lt;/div&gt;
              &lt;md-list ng-repeat="item in playlist track by $index" ng-show="playlist.length" id="toastParent"&gt;
                  &lt;md-list-item class="md-list-item-text"&gt;
                      &lt;p class="md-caption"&gt;&lt;em&gt;{{ item.title }}&lt;/em&gt;&lt;/p&gt;
                  &lt;/md-list-item&gt;
                  &lt;hr/&gt;
              &lt;/md-list&gt;
          &lt;/md-content&gt;
          &lt;md-divider&gt;&lt;/md-divider&gt;
      &lt;/md-sidenav&gt;
      &lt;section layout="column" flex&gt;
          &lt;md-toolbar class="md-theme-indigo" hide show-gt-sm&gt;
              &lt;div class="md-toolbar-tools"&gt;
                  &lt;md-button class="md-icon-button" aria-label="repeat" ng-click="prevSong()" ng-if="!isRadio"&gt;
                      &lt;md-icon md-svg-icon="assets/icons/skip_previous.svg"&gt;&lt;/md-icon&gt;
                      &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                          Prev
                      &lt;/md-tooltip&gt;
                  &lt;/md-button&gt;
                  &lt;md-slider ng-model="player.currentTime" step="1" min="1" max="{{player.duration}}" aria-label="seek" class="md-warn flex" style="padding-left: 20px; padding-right: 20px" ng-if="!isRadio"&gt;&lt;/md-slider&gt;
                  &lt;md-button class="md-icon-button" aria-label="repeat" ng-click="nextSong()" ng-if="!isRadio"&gt;
                      &lt;md-icon md-svg-icon="assets/icons/skip_next.svg"&gt;&lt;/md-icon&gt;
                      &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                          Next
                      &lt;/md-tooltip&gt;
                  &lt;/md-button&gt;
                  &lt;md-divider md-inset ng-if="!isRadio"&gt;&lt;/md-divider&gt;
                  &lt;md-button class="md-icon-button" aria-label="mute" ng-click="volMute()"&gt;
                      &lt;md-icon md-svg-icon="assets/icons/volume_down.svg"&gt;&lt;/md-icon&gt;
                      &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                          Mute
                      &lt;/md-tooltip&gt;
                  &lt;/md-button&gt;
                  &lt;md-slider ng-model="player.volume" step="0.1" min="0.0" max="1" aria-label="volume" class="md-warn md-hue-3 flex" style="padding-left: 20px; padding-right: 20px"&gt;&lt;/md-slider&gt;
                  &lt;md-button class="md-icon-button" aria-label="volfull" ng-click="volMax()"&gt;
                      &lt;md-icon md-svg-icon="assets/icons/volume_up.svg"&gt;&lt;/md-icon&gt;
                      &lt;md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true"&gt;
                          Max
                      &lt;/md-tooltip&gt;
                  &lt;/md-button&gt;
              &lt;/div&gt;
          &lt;/md-toolbar&gt;
          &lt;img src="assets/play_stop.gif" alt="Loading" ng-if="loading" layout-fill&gt;
          &lt;div ng-if="!loading" layout="column" layout-fill&gt;
              &lt;md-button class="md-fab md-primary" style="position:fixed; bottom:0; left:0" aria-label="openSidebar" ng-click="openSidebar()" hide-gt-md&gt;
                  &lt;md-icon md-svg-src="assets/icons/featured_play_list.svg"&gt;&lt;/md-icon&gt;
                  &lt;md-tooltip md-direction="right" md-visible="tooltipVisible" md-autohide="true"&gt;
                      Show sidebar
                  &lt;/md-tooltip&gt;
              &lt;/md-button&gt;
              &lt;md-content flex&gt;
                  &lt;section ng-cloak&gt;
                          &lt;div ui-view&gt;&lt;/div&gt;
                  &lt;/section&gt;
              &lt;/md-content&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The <code>$mdToast</code> gets trigged when <code>addPlaylist()</code> is called from within the <code>md-list-item</code> element.</p>