Javascript 引导标头导航栏（带有固定顶部的类导航栏和可折叠窗体）工作不正常

我有以下div，其中包含可折叠的登录表单，位于页面顶部，该页面最初是隐藏的。 我在顶部还有标题导航栏，上面有一个锚（名为“Login”），单击该锚后，可以切换上述登录表单

<!--Login Form Collapse Div-->

        <div id="login" class="collapse" style="height: 0px; position:fixed;">
            <div class="container">
                <div class="top-form-inner">
                    <form class="form-inline" role="form">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail2">
                            Email address
                        </label>
                        <input id="exampleInputEmail2" class="form-control" type="email" placeholder="Enter email">
                        </input>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword2">
                            Password
                        </label>
                        <input id="exampleInputPassword2" class="form-control" type="password" placeholder="Password">
                        </input>
                    </div>
                    <a class="btn btn-primary" href="#">Login </a>
                    </form>
                </div>
            </div>
        </div>

        <--/Login Form Collapse Div-->

        <--Header Navbar Fixed Top-->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0px; background-color: #fff;">
                <div class="container">
                    <div class="navbar-header">
                        <button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                        <a class="navbar-brand" href="#"> <span class="glyphicon glyphicon-dashboard"></span> Mobi <span class="sec-brand"> Market. </span> </a>
                    </div>

                    <!--Collect the header nav links, forms, and other content for toggling-->
                    <div class="navbar-collapse navbar-ex1-collapse collapse" style="height: 1px;">
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input class="form-control input-sm" type="text" placeholder="Enter Your Keyword">
                                </input>
                                <button type="submit" class="btn btn-default">Search</button>
                            </div>
                        </form>
                        <p class="navbar-text pull-right"> Already a user? 


    <--Login Anchor which I am using to toggle login form-->

    <a class="navbar-link" data-target="#login" data-toggle="collapse" href="#"> Login </a> 

<--/Login Anchor which I am using to toggle login form-->

    </p>
                        <div class="btn-toolbar pull-right">
                            <div class="btn-group"> <a class="btn btn-primary navbar-btn btn-sm" href="#"> <i class="fa fa-plus-circle"></i> Submit listing </a> </div>
                            <div class="btn-group"></div>
                        </div>
                    </div>
                    <!--/.navbar-collapse-->
                </div>
                <!--/Container-->
            </nav>
        <--/Header Navbar Fixed Top-->

电子邮件地址
暗语
搜索
已经是用户了吗？

如果我不添加类“navbar fixed top”，所有这些都可以正常工作。当我点击标题导航栏中的登录锚时，登录表单会切换， 但是，只要我将class“navbar fixed top”添加到顶部标题，登录表单就会隐藏在标题nvabar后面。在移动视图中，问题更为严重

以下是我正在尝试做的演示：

---

预览都可以正常工作。\n不！在第二次预览中，当您单击“登录”锚（查找-->“已是用户？登录”）时，登录表单打开，但位于标题导航栏后面，导致其隐藏。