Pdf in Iframe overlapping top navigation bar in in

I am working on asp.net webform with a masterpage. The master page has a top navigation bar and a side bar. beside side bar i called contentplaceholder in which i've put an iframe. in that iframe i am opening the pdf-file "files.pdf" in an iframe; it is working fine with other browsers but when i open this page in internet explorer, the iframe overlaps the top menu :( kindly help me to resolve this issue .

Here is my Master Page Code

<body>
    <form id="form1" runat="server">
         <div id="wrapper" class="mywrapper">
            <!-- Navigation -->
            <!-- Fixed navbar -->
            <nav class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
              ......
            </nav>
            <div class="row">
                <div class="col-md-3" style="z-index:2;">
                    <div class="navbar-default sidebar" role="navigation">                   
                        <div class="sidebar-nav">
                           ...................
                        </div>
                        <!-- /.sidebar-collapse -->
                    </div>
                    <!-- /.navbar-static-side -->
                </div>

                <div class="col-md-9 col-sm-9 col-lg-9" style="background-color: #FFF; z-index:1;" >
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
    </form>
</body>

Here is my Content aspx Page

    <div class="embed-responsive embed-responsive-16by9" style="height:1000px;">
        <iframe id="myiframe" class="embed-responsive-item" runat="server"  ></iframe>        
    </div>    
</asp:Content>

Here is my Content cs Page

protected void Page_Load(object sender, EventArgs e)
{
    string PageToOpen = Request.QueryString.Get("open");
    myiframe.Attributes.Add("src", PageToOpen);
}

I think you need to set the iframe wmode to "opaque"

<iframe ... wmode="opaque"></iframe>

See
z-index does not work in Internet Explorer with pdf in iframe
and
YouTube Video Embedded via iframe Ignoring z-index?

Also, it's hard to tell when you don't show us the styles you have defined.
But it's most-likely an issue with the z-index.

Never mind, seems to be for flash video only.
Just set a div with the height of the navigation bar before the iframe (the blue div).
That way, you shouldn't need the z-index.

<!doctype html>
<html>
<head>
    <title>
        Test
    </title>


    <style type="text/css">


        html, body
        {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }


        .navbar-fixed-top
        {
            position: fixed;
            display: block;
            width: 100%;
            background-color: red;
            height: 50px;
            top: 0px;
        }

        .sidebar
        {
            display: block;
            float: left;
            width: 20%;
            height: 900px;
            background-color: green;
        }

    </style>


</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper" class="mywrapper">

            <!-- Navigation -->
            <!-- Fixed navbar -->
            <nav class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
                ......
            </nav>
            <div class="row">
                <div class="col-md-3" style="z-index:2;">
                    <div class="navbar-default sidebar" role="navigation">
                        <div class="sidebar-nav">
                            ...................
                        </div>
                        <!-- /.sidebar-collapse -->
                    </div>
                    <!-- /.navbar-static-side -->
                </div>

                <div class="col-md-9 col-sm-9 col-lg-9" style="background-color: #FFF; z-index:1; background-color: yellow;">
                    <div style="display: block; width: 100%; height: 60px; background-color: blue;">aaaa</div>
                    <iframe src="about:blank" frameborder="0" style="width: 80%; height: 500px; border: none;"></iframe>
                </div>
            </div> <!-- End Row -->
        </div><!-- End Wrapper -->
    </form>
</body>
</html>