对话框永远不会在页面顶部

Question

我有一个页面，右侧有一个固定的导航栏和页面内容。

在页面内容中我有一个按钮，当我点击他时，它会在页面中央打开一个对话框，我正在使用 Angular 材料对话框。

问题是当我打开对话框时，固定栏总是在页面顶部：

如您所见，边栏隐藏了该对话框的一部分。

这是我用来显示对话框的代码：

$mdDialog.show({
                    clickOutsideToClose: true,
                    controller         : DialogController,
                    controllerAs       : 'vm',
                    parent             : $document.find('body').eq(0),
                    templateUrl        : templateUrl,
                    targetEvent        : event
                });

如您所见，我使用 $document.find('body').eq(0), 作为对话框的父级，但为什么此对话框永远不会位于侧边栏的顶部？

jsfiddle :

http://jsfiddle.net/jhzawjdb/17/

我该如何解决这个问题？

Answer 1

将 #sidebar-wrapper 上的 z-index 从 1000 覆盖或更改为 0。

http://jsfiddle.net/vcpqasyd/

Answer 2

#sidebar-wrapper {
    z-index: 0;
}

将 z-index 更改为 0，这将更正模态对话框。