Z-index doesn't works in Internet Explorer 11 - css

Question

I've a problem with the z-index on IE 11, a dropdown appears under other element in a pop up message. Let me show you a little sketch captured from the page.
Pop-up sample
I reasearch for a lot of possibles solutions but any doesn't works for me. Also I am using PrimeFaces with Angular 2. I found this solution to fix this kind of problem in IE:
<div style="position: relative; z-index: 3000">
<div style="position: absolute; z-index: 1000">
[ ... ] <!-- The drop down menu will be here -->
</div>
</div>
And I tried to use this way with my code, but doesn't work. :(
<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! -->
Can anybody help me?
Thanks in advance to everybody.
Ashia.

Answer 1

Because sadly, you cannot redefine z-index for a child component with a parent who already has z-index defined. The child inherit the z-index from it parent when it exist.
You can use the z-index: -1; hack, but it's not really a stable and advisable solution...
The best approach is to define z-index for your “brother” component (both .ui-g-6 for example).

Answer 2

Thanks to everybody, specially to #MadDev, finally I solved the problem following your answer, I used the following code
<p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown appendTo="body"></p-dropdown>
</p-dialog>
Ashia.

Answer 3

I think that your problem comes from PrimeNG. Note that you are using a p-dialog, with a p-dropdown component inside, such the PrimeNG documentation explains:
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>
Then your code should be:
<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>
This should fix your problem.
;-)