Z-index在Internet Explorer 11中無法正常工作

Question

我在IE 11上遇到了Z-index的問題，在彈出的消息中出現其他元素下的下拉列表。讓我給你看一張從該頁面捕獲的小圖。

Pop-up sample

我reasearch了很多候選條件的解決方案，但沒有任何確實爲我工作。我也是使用PrimeFaces與角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-對話，以對下拉組件內部，這樣的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。