md-dialog Angular material/material2 异常行为（它隐藏了固定位置的div）答案

【问题标题】：md-dialog Angular material/material2 abnormal behaviour (it hides the fixed position div)md-dialog Angular material/material2 异常行为（它隐藏了固定位置的div）
【发布时间】：2017-12-28 02:07:47
【问题描述】：

实际上我正在使用 Material2 设计开发 Angular 4，所以我遇到了 <md-dialog>，决定在我的应用程序中使用。

App 包含一个标题，即 fixed position:fixed 和一个侧边栏 fixed。

我使用了<md-dialog>，是的，它可以正常工作，直到页面不滚动，但是当页面滚动到页面底部的某处时，点击触发<md-dialog>的按钮会出现异常行为固定位置 div隐藏在<md-dialog>后面

工作的笨蛋：https://plnkr.co/edit/1F5La3HPmd8RxXtPip3o?p=preview

对消除这种行为有什么帮助吗？

【问题讨论】：

问题是您使用 Angular 2+ 材料和 AngularJS，而不是 Angular 2+。 AngularJS 是 1.x，不支持 Angular 2+ - Material。
它也在 angular4 和 material2 中测试过，但面临同样的问题

标签： angular angular-material angular2-template angular-material2

【解决方案1】：

您遇到的问题是您正在创建一个没有位置的固定位置 div。使用fixed时，需要设置至少一种“top”“left”“right”“bottom”样式。见this working plunker。

最值得注意的html：

<div id="toolc" style="position:fixed; border:4px solid red;color:white;background-color:black;top:15px;left:15px">Fixed Div</div>
<div style="height:100px"></div>
<button md-button (click)="openDialog()">Launch dialog</button>
You chose: {{selectedOption}}
<div style="height:300px;"></div>
<div>scroll down</div>
<div style="height:600px;"></div>
<p>scroll down</p>
<button md-button (click)="openDialog()">Launch dialog</button>

出现此问题是因为 MdDialog 更改了<html> 标签“顶部”样式以确保对话框在单击时始终显示在屏幕上。如果固定的 div 也没有“顶部”样式，它将移动它们。

【讨论】：

太棒了！不知道 MdDialog 改变了<html> 标签top-style
太棒了！多谢。我将 top: 0 添加到我的侧边栏，一切都按预期进行