Question

我在IE 11上遇到z-index问题，弹出消息中的其他元素下方会出现一个下拉列表。让我向您展示从页面捕获的一个小草图。

我研究了很多可能的解决方案，但任何对我都不起作用。我也在使用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! -->

有人能帮助我吗？

先谢谢大家。 Ashia。

Answer 1

遗憾的是，您无法为已定义z-index的父级组件重新定义 z-index。当孩子存在时，孩子从父母那里继承z-index。

您可以使用z-index: -1;黑客攻击，但它并不是一个稳定且可行的解决方案...

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

Answer 2

我认为您的问题来自PrimeNG。请注意，您正在使用p对话框，其中包含p-dropdown组件，例如PrimeNG文档解释：

Overlays Inside
When dialog includes other components with overlays such as dropdown, the 
overlay part cannot exceed dialog boundaries due to overflow. In order to 
solve this, you can either append the overlay to the body or allow overflow 
in dialog.


<p-dialog>
   <p-dropdown appendTo="body"></p-dropdown>
</p-dialog>


<p-dialog [contentStyle]="{'overflow':'visible'}">
   <p-dropdown></p-dropdown>
</p-dialog>

然后你的代码应该是：

<p-dialog header="Assign claim {{ vm.request.id }}" 
       [(visible)]="vm.isDisplayed" [width]="700" [modal]="true" 
       [contentStyle]="{'overflow':'visible'}>

    <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"> 

            <p-dropdown class="popup-dropdown" appendTo="body" 
                [(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>

这可以解决您的问题。

- ）

Answer 3

感谢大家，特别是@MadDev，最后我在你的回答后解决了问题，我使用了以下代码

<p-dialog [contentStyle]="{'overflow':'visible'}">

   <p-dropdown appendTo="body"></p-dropdown>

</p-dialog>

Ashia。

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

3 个答案: