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

Question

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

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

问题是当我打开对话框时，固定栏始终位于页面顶部：

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

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

$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: 0;
}

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

Answer 2

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

http://jsfiddle.net/vcpqasyd/