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

【问题标题】：Z-index doesn't works in Internet Explorer 11Z-index 在 Internet Explorer 11 中不起作用
【发布时间】：2018-01-17 06:08:22
【问题描述】：

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

Pop-up sample

我重新搜索了很多可能的解决方案，但任何一个都不适合我。我也在使用带有 Angular 2 的 PrimeFaces。我发现 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! -->

谁能帮帮我？

提前感谢大家。阿夏。

【问题讨论】：

标签： css internet-explorer-11 angular2-template

【解决方案1】：

因为可悲的是，您不能为已定义 z-index 的父组件的子组件重新定义 z-index。如果存在，子级会从其父级继承 z-index。

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

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

【讨论】：

【解决方案2】：

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

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

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

</p-dialog>

阿希亚。

【讨论】：

【解决方案3】：

我认为您的问题来自 PrimeNG。请注意，您使用的是 p-dialog，内部带有 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>

这应该可以解决您的问题。

;-)

【讨论】：