Z-index doesn't works in Internet Explorer 11

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.