Css $mdtoast将页面底部放置在滚动条上

我没有CSS和位置属性的经验，并且刚刚开始使用角度材质。我试图使用mdtoast服务，但无法将其正确定位在页面底部

即使在将元素设置为Debug .Stand之后，当我向下滚动时，MDOTAST的位置也会在页面的中间徘徊，如附件所示。我如何才能使它从页面底部弹出，即使在滚动之后

相关html代码：

<md-toolbar class="md-theme-indigo">
    <div class="md-toolbar-tools">
        <a ui-sref="player.songs"><img src="assets\images\music-player.png" width="50px" height="50px"></img>
        </a>
        <md-button class="md-icon-button" aria-label="play" ng-click="stopSong()" ng-show="isPlaying">
            <md-icon md-svg-icon="assets/icons/clear.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Stop
            </md-tooltip>
        </md-button>
        <md-button class="md-icon-button" aria-label="play" ng-click="resumeSong()" ng-show="isPaused">
            <md-icon md-svg-icon="assets/icons/play.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Resume
            </md-tooltip>
        </md-button>
        <md-button class="md-icon-button" aria-label="pause" ng-click="pauseSong()" ng-show="isPlaying && !isPaused">
            <md-icon md-svg-icon="assets/icons/pause.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Pause
            </md-tooltip>
        </md-button>
        <md-button class="md-icon-button" aria-label="repeat" ng-click="enableLoop()">
            <md-icon md-svg-icon="{{repeat_icon}}"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Repeat
            </md-tooltip>
        </md-button>
        <span flex></span>
        <h3 hide show-gt-sm>Music Player</h3>
        <span flex></span>
        <md-button ui-sref="player.radio" class="md-icon-button" aria-label="radio" ng-show="state === 'songs'">
            <md-icon md-svg-icon="assets/icons/radio.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Go To Radio
            </md-tooltip>
        </md-button>  
        <md-button ui-sref="player.songs" class="md-icon-button" aria-label="songs" ng-show="state === 'radio'">
            <md-icon md-svg-icon="assets/icons/queue_music.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Go To Songs
            </md-tooltip>
        </md-button>  
        <md-menu md-position-mode="target-right target" hide-gt-sm>
            <md-button class="md-icon-button" aria-label="controls" ng-click="$mdOpenMenu($event)">
                <md-icon md-svg-icon="assets/icons/settings.svg"></md-icon>
            </md-button>
            <md-menu-content width="6" layout-padding>
                <label><md-icon md-svg-icon="assets/icons/volume_up_black.svg"></md-icon></label>
                <md-slider md-discrete ng-model="player.volume" step="0.1" min="0.0" max="1" aria-label="volume"></md-slider>
                <label ng-if="!isRadio"><md-icon md-svg-icon="assets/icons/fast_forward_black.svg"></md-icon></label>
                <md-slider md-discrete ng-model="player.currentTime" step="1" min="1" max="{{player.duration}}" aria-label="seek" class="md-primary" ng-if=!isRadio></md-slider>
            </md-menu-content>
        </md-menu>
        <md-menu md-position-mode="target-right target" layout="column" layout-align="center center">
            <md-button class="md-icon-button" aria-label="controls" ng-click="$mdOpenMenu($event)">
                <md-icon md-svg-icon="assets/icons/apps.svg"></md-icon>
                <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                    Apps
                </md-tooltip>
            </md-button>
            <md-menu-content width="2">
                <md-button ui-sref="reddit"><span md-menu-align-target>Reddit</span></md-button>
                <md-divider></md-divider>
                <md-button ui-sref="player.songs"><span md-menu-align-target>Music</span></md-button>
            </md-menu-content>
        </md-menu>    
    </div>
</md-toolbar>
<md-progress-linear class="md-warn md-hue-3" md-mode="determinate" value="{{progress}}" ng-if="!isRadio"></md-progress-linear>
<section layout="row" layout-fill>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
        <md-toolbar class="md-theme-indigo">
            <md-sub class="md-toolbar-tools">Status<span ng-show="isPaused">&nbsp;<span class="md-caption">Paused</span></span></h1>
            <span flex></span>
            <md-button class="md-primary" aria-label="play_all" ng-hide="!playlist.length" ng-click="nextSong()">{{isPlaying ? 'Next':'Play All'}}</md-button>
        </md-toolbar>
        <md-content layout="column" ng-show="isPlaying" layout-align="center center" layout-padding>
            <md-subheader class="md-primary">{{playing}}</md-subheader>
        </md-content>
        <md-divider></md-divider>
        <md-content layout="column" layout-padding>
            <img src="assets/images/yeoman.png" width="130px;" height="100px;" style="margin-left: auto;margin-right: auto;" ng-hide="playlist.length">
            <p class="md-caption" style="margin-left: auto;margin-right: auto; text-align: center;" " ng-hide="playlist.length">Add to this playlist by clicking the <md-icon md-svg-icon="assets/icons/menu_black.svg" style="color: #0F0;" aria-label="Alarm Icon"></md-icon> icon in the listing and selecting "Add To Playlist"</p>
            <div layout="row">
                <h3 class="md-title" style="color: green;" ng-show="playlist.length">Next Up</h3>
                <span flex></span>
                <md-button class="md-fab md-mini md-warn" aria-label="clear_all" ng-hide="!playlist.length" ng-click="clearPlaylist()">
                    <md-icon md-svg-icon="assets/icons/clear_all.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Clear Playlist
                    </md-tooltip>
                </md-button>
            </div>
            <md-list ng-repeat="item in playlist track by $index" ng-show="playlist.length" id="toastParent">
                <md-list-item class="md-list-item-text">
                    <p class="md-caption"><em>{{ item.title }}</em></p>
                </md-list-item>
                <hr/>
            </md-list>
        </md-content>
        <md-divider></md-divider>
    </md-sidenav>
    <section layout="column" flex>
        <md-toolbar class="md-theme-indigo" hide show-gt-sm>
            <div class="md-toolbar-tools">
                <md-button class="md-icon-button" aria-label="repeat" ng-click="prevSong()" ng-if="!isRadio">
                    <md-icon md-svg-icon="assets/icons/skip_previous.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Prev
                    </md-tooltip>
                </md-button>
                <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"></md-slider>
                <md-button class="md-icon-button" aria-label="repeat" ng-click="nextSong()" ng-if="!isRadio">
                    <md-icon md-svg-icon="assets/icons/skip_next.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Next
                    </md-tooltip>
                </md-button>
                <md-divider md-inset ng-if="!isRadio"></md-divider>
                <md-button class="md-icon-button" aria-label="mute" ng-click="volMute()">
                    <md-icon md-svg-icon="assets/icons/volume_down.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Mute
                    </md-tooltip>
                </md-button>
                <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"></md-slider>
                <md-button class="md-icon-button" aria-label="volfull" ng-click="volMax()">
                    <md-icon md-svg-icon="assets/icons/volume_up.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Max
                    </md-tooltip>
                </md-button>
            </div>
        </md-toolbar>
        <img src="assets/play_stop.gif" alt="Loading" ng-if="loading" layout-fill>
        <div ng-if="!loading" layout="column" layout-fill>
            <md-button class="md-fab md-primary" style="position:fixed; bottom:0; left:0" aria-label="openSidebar" ng-click="openSidebar()" hide-gt-md>
                <md-icon md-svg-src="assets/icons/featured_play_list.svg"></md-icon>
                <md-tooltip md-direction="right" md-visible="tooltipVisible" md-autohide="true">
                    Show sidebar
                </md-tooltip>
            </md-button>
            <md-content flex>
                <section ng-cloak>
                        <div ui-view></div>
                </section>
            </md-content>
        </div>
    </section>
</section>

停止
简历
暂停
重复
音乐播放器
收听广播
唱歌
应用程序
雷迪特
音乐
状态暂停
{{isplay？'Next'：'Play All'}
{{玩}
所以。。。Angle Material目前在定位方面存在两个问题（
$mdToast
）（请参阅Github问题）。但是，有一个解决方法：向父元素添加
布局
和
flex
指令应该可以解决这个问题
 如果设置
。位置（'bottom left'）
？保持在同一位置，会发生什么？如果不定义任何父元素，会发生什么？你能把一个简单的小提琴/笔放在一起重现问题吗？嗯，我从来没有使用过这些工具。不知道如何复制它。如果我添加了与控制器关联的html以及控制器代码，会有帮助吗？
<md-toolbar class="md-theme-indigo">
    <div class="md-toolbar-tools">
        <a ui-sref="player.songs"><img src="assets\images\music-player.png" width="50px" height="50px"></img>
        </a>
        <md-button class="md-icon-button" aria-label="play" ng-click="stopSong()" ng-show="isPlaying">
            <md-icon md-svg-icon="assets/icons/clear.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Stop
            </md-tooltip>
        </md-button>
        <md-button class="md-icon-button" aria-label="play" ng-click="resumeSong()" ng-show="isPaused">
            <md-icon md-svg-icon="assets/icons/play.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Resume
            </md-tooltip>
        </md-button>
        <md-button class="md-icon-button" aria-label="pause" ng-click="pauseSong()" ng-show="isPlaying && !isPaused">
            <md-icon md-svg-icon="assets/icons/pause.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Pause
            </md-tooltip>
        </md-button>
        <md-button class="md-icon-button" aria-label="repeat" ng-click="enableLoop()">
            <md-icon md-svg-icon="{{repeat_icon}}"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Repeat
            </md-tooltip>
        </md-button>
        <span flex></span>
        <h3 hide show-gt-sm>Music Player</h3>
        <span flex></span>
        <md-button ui-sref="player.radio" class="md-icon-button" aria-label="radio" ng-show="state === 'songs'">
            <md-icon md-svg-icon="assets/icons/radio.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Go To Radio
            </md-tooltip>
        </md-button>  
        <md-button ui-sref="player.songs" class="md-icon-button" aria-label="songs" ng-show="state === 'radio'">
            <md-icon md-svg-icon="assets/icons/queue_music.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Go To Songs
            </md-tooltip>
        </md-button>  
        <md-menu md-position-mode="target-right target" hide-gt-sm>
            <md-button class="md-icon-button" aria-label="controls" ng-click="$mdOpenMenu($event)">
                <md-icon md-svg-icon="assets/icons/settings.svg"></md-icon>
            </md-button>
            <md-menu-content width="6" layout-padding>
                <label><md-icon md-svg-icon="assets/icons/volume_up_black.svg"></md-icon></label>
                <md-slider md-discrete ng-model="player.volume" step="0.1" min="0.0" max="1" aria-label="volume"></md-slider>
                <label ng-if="!isRadio"><md-icon md-svg-icon="assets/icons/fast_forward_black.svg"></md-icon></label>
                <md-slider md-discrete ng-model="player.currentTime" step="1" min="1" max="{{player.duration}}" aria-label="seek" class="md-primary" ng-if=!isRadio></md-slider>
            </md-menu-content>
        </md-menu>
        <md-menu md-position-mode="target-right target" layout="column" layout-align="center center">
            <md-button class="md-icon-button" aria-label="controls" ng-click="$mdOpenMenu($event)">
                <md-icon md-svg-icon="assets/icons/apps.svg"></md-icon>
                <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                    Apps
                </md-tooltip>
            </md-button>
            <md-menu-content width="2">
                <md-button ui-sref="reddit"><span md-menu-align-target>Reddit</span></md-button>
                <md-divider></md-divider>
                <md-button ui-sref="player.songs"><span md-menu-align-target>Music</span></md-button>
            </md-menu-content>
        </md-menu>    
    </div>
</md-toolbar>
<md-progress-linear class="md-warn md-hue-3" md-mode="determinate" value="{{progress}}" ng-if="!isRadio"></md-progress-linear>
<section layout="row" layout-fill>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
        <md-toolbar class="md-theme-indigo">
            <md-sub class="md-toolbar-tools">Status<span ng-show="isPaused">&nbsp;<span class="md-caption">Paused</span></span></h1>
            <span flex></span>
            <md-button class="md-primary" aria-label="play_all" ng-hide="!playlist.length" ng-click="nextSong()">{{isPlaying ? 'Next':'Play All'}}</md-button>
        </md-toolbar>
        <md-content layout="column" ng-show="isPlaying" layout-align="center center" layout-padding>
            <md-subheader class="md-primary">{{playing}}</md-subheader>
        </md-content>
        <md-divider></md-divider>
        <md-content layout="column" layout-padding>
            <img src="assets/images/yeoman.png" width="130px;" height="100px;" style="margin-left: auto;margin-right: auto;" ng-hide="playlist.length">
            <p class="md-caption" style="margin-left: auto;margin-right: auto; text-align: center;" " ng-hide="playlist.length">Add to this playlist by clicking the <md-icon md-svg-icon="assets/icons/menu_black.svg" style="color: #0F0;" aria-label="Alarm Icon"></md-icon> icon in the listing and selecting "Add To Playlist"</p>
            <div layout="row">
                <h3 class="md-title" style="color: green;" ng-show="playlist.length">Next Up</h3>
                <span flex></span>
                <md-button class="md-fab md-mini md-warn" aria-label="clear_all" ng-hide="!playlist.length" ng-click="clearPlaylist()">
                    <md-icon md-svg-icon="assets/icons/clear_all.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Clear Playlist
                    </md-tooltip>
                </md-button>
            </div>
            <md-list ng-repeat="item in playlist track by $index" ng-show="playlist.length" id="toastParent">
                <md-list-item class="md-list-item-text">
                    <p class="md-caption"><em>{{ item.title }}</em></p>
                </md-list-item>
                <hr/>
            </md-list>
        </md-content>
        <md-divider></md-divider>
    </md-sidenav>
    <section layout="column" flex>
        <md-toolbar class="md-theme-indigo" hide show-gt-sm>
            <div class="md-toolbar-tools">
                <md-button class="md-icon-button" aria-label="repeat" ng-click="prevSong()" ng-if="!isRadio">
                    <md-icon md-svg-icon="assets/icons/skip_previous.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Prev
                    </md-tooltip>
                </md-button>
                <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"></md-slider>
                <md-button class="md-icon-button" aria-label="repeat" ng-click="nextSong()" ng-if="!isRadio">
                    <md-icon md-svg-icon="assets/icons/skip_next.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Next
                    </md-tooltip>
                </md-button>
                <md-divider md-inset ng-if="!isRadio"></md-divider>
                <md-button class="md-icon-button" aria-label="mute" ng-click="volMute()">
                    <md-icon md-svg-icon="assets/icons/volume_down.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Mute
                    </md-tooltip>
                </md-button>
                <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"></md-slider>
                <md-button class="md-icon-button" aria-label="volfull" ng-click="volMax()">
                    <md-icon md-svg-icon="assets/icons/volume_up.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Max
                    </md-tooltip>
                </md-button>
            </div>
        </md-toolbar>
        <img src="assets/play_stop.gif" alt="Loading" ng-if="loading" layout-fill>
        <div ng-if="!loading" layout="column" layout-fill>
            <md-button class="md-fab md-primary" style="position:fixed; bottom:0; left:0" aria-label="openSidebar" ng-click="openSidebar()" hide-gt-md>
                <md-icon md-svg-src="assets/icons/featured_play_list.svg"></md-icon>
                <md-tooltip md-direction="right" md-visible="tooltipVisible" md-autohide="true">
                    Show sidebar
                </md-tooltip>
            </md-button>
            <md-content flex>
                <section ng-cloak>
                        <div ui-view></div>
                </section>
            </md-content>
        </div>
    </section>
</section>