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

Question

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

应用程序包含 header 即 fixed position:fixed 和侧边栏 fixed。

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

后面

工作 plunker : https://plnkr.co/edit/1F5La3HPmd8RxXtPip3o?p=preview

对消除该行为有任何帮助吗？

Answer 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> 标记 'top' 样式以确保单击时对话框始终在屏幕上。如果它们也没有 'top' 样式，它将固定移动 divs。

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

md-dialog Angular material/material2 abnormal behaviour (it hides the fixed position div)

angular-material

angular2-template

angular-material2

angular