Iframe перекрывает другой элемент в IE

Question

У меня есть проблема в iframe. Iframe перекрывает другие элементы моего сайта, такие как выпадающий список, модальные и т. Д. c. Я уже пробовал z-index , предложенный другими при поиске возможного решения. Я столкнулся с этой проблемой в IE11 (не знаю FF и сафари), но в chrome проблем нет.

HTML Код

<div class="card card-primary" style="min-height:600px; max-height:600px">
<div class="card-header">
    <b>Forecast</b>
    <input id="txtProcedureID" type="hidden" value="ac27917a-385f-42f9-af73-9559b81650fd">
    <input id="txtProcedureName" type="hidden" value="Forecast">

        <div style="right:10px; position: absolute;">
            <div class="btn-group dropleft">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Options
                </button>
                <div class="dropdown-menu dropleft" x-placement="left-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-2px, 1px, 0px);">
                        <a id="btnProcedureViewInfo" class="dropdown-item has-icon" href="#"><i class="fa fa-info-circle"></i> File Info</a>
                        <a id="btnProcedureDownload" class="dropdown-item has-icon" href="/procedure/DownloadProcedureFile?ProcedureID=ac27917a-385f-42f9-af73-9559b81650fd"><i class="fa fa-download"></i> Download</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item has-icon" href="#" onclick="ShareLink('/Procedure?procedureID=ac27917a-385f-42f9-af73-9559b81650fd')"><i class="fa fa-share-alt"></i> Share</a>
                                                <div class="dropdown-divider"></div>
                        <div class="dropdown-divider"></div>
                            <a id="btnProcedureUpload" class="dropdown-item has-icon btn-success" href="#"><i class="fa fa-file"></i> Update File</a>
                </div>
            </div>
        </div>
</div>
<div id="divProcedureMain" class="card-body">
        <p>
             <iframe class="col-12 col-md-12 col-lg-12" style="height:475px;" src="uploads\procedure\676fa154-be00-4852-85e9-1fa605feb7d4\84a5e46e-84fb-4eba-bbba-8ce6d420f585\ac27917a-385f-42f9-af73-9559b81650fd\e26071be-2cd3-4615-bdd0-355b979332eb.pdf">
            </iframe>
        </p>
</div>

Chrome

EI11