Popover z-index不适用于AngularJS

Question

我正在以下指令中初始化一个popover。然而，当我点击它时它仍然出现在我固定的Bootstrap导航栏下，即使我已经将z-index设置为2000，静态导航栏也是1030，更不用了。

使用dev工具进一步检查显示未应用css z-index。知道发生了什么事吗？

我不知道需要为此发布多少代码，所以如果您需要更多代码，请告诉我。

CSS

.popover {
    z-index: 2000 !important;
}

JS

directive('myDirective', ['$compile', function ($compile) {

    function link(scope, element, attrs) {
        scope.popovers = {
            somePopover: element.find('.somePopover-btn').popover({
                content: $compile('<anotherDirective></anotherDirective>')(scope),
                html: true,
                title: 'Title'
            })
        };
    }

    return {
        link: link,
        restrict: 'A'
    };

}]).