css - Z-index 在 Internet Explorer 11 中不起作用

Question

我在 IE 11 上遇到了 z-index 问题，弹出消息中的其他元素下方出现了一个下拉菜单。让我给你看一下从页面上截取的小草图。

Pop-up sample

我研究了很多可能的解决方案，但没有一个适合我。我也将 PrimeFaces 与 Angular 2 一起使用。我发现 this solution在 IE 中解决此类问题:

<div style="position: relative; z-index: 3000">

    <div style="position: absolute; z-index: 1000">

         [ ... ] <!-- The drop down menu will be here -->

    </div>
</div>

我尝试在我的代码中使用这种方式，但没有用。 :(

<p-dialog header="Assign claim {{ vm.request.id }}" [(visible)]="vm.isDisplayed" [width]="700" [modal]="true" >
<div class="ui-g form-group">
    <div style="z-index: 3000">

        <div class="ui-g-6">
            <h4>Lorem ipsum</h4>
            {{vm.request.responsible}}
        </div>

        <div class="ui-g-6">
            <h4>et dolo</h4>
            <div style="z-index: 1000"> <!-- This dropdown menu should to appear over the form, not behind :(  -->
                <p-dropdown class="popup-dropdown" [(ngModel)]="vm.id" [options]="vm.users" [autoWidth]="false" (onChange)="changeAssignedUserId($event.value)">
                </p-dropdown>
            </div>
        </div>        
        <div class="ui-g ui-g-12"></div>

        </div>

</div>

<!-- More awesome code! -->

谁能帮帮我？

在此先感谢大家。 阿夏。

Answer 1

遗憾的是，您无法重新定义 z-index 的子组件的父组件已经定义了 z-index。子级在存在时从其父级继承 z-index。

您可以使用 z-index: -1; hack，但这并不是一个真正稳定且可取的解决方案...

最好的方法是为您的“兄弟”组件定义z-index(例如，.ui-g-6)。