Question

我正在尝试从我的导航栏覆盖页面标题进行登录下拉列表。导航栏和下拉列表使用ui bootstrap。我尝试了以下方法：

1. #login-dp{
        min-width: 200px;
        padding: 14px 14px 0;
        position: relative;
        z-index: 1000;
    }`

我尝试用该类封装ul并将包装器位置设置为绝对位置（当我点击下拉列表时修复了其他2个元素来自掩体）
我尝试将＃login-dp设置为absolute，将wrapper设置为relative

我发现的大多数解决方案只提到了位置和z-index。

以下是一些代码：

<ul class="nav navbar-nav navbar-right">
                <li><p class="navbar-text">Already have an account?</p></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" ng-click="isDropCollapsed = !isDropCollapsed"><b>Login</b> <span class="caret"></span></a>
                 <div class="wraper1">
                 <ul id="login-dp" class="dropdown-menu dropdown-menu-right" uib-collapse="isDropCollapsed">
                    <li>
                        <div class="row">
                            <div class="col-md-12">
                                <!--<p>Login via</p> 
                                <div class="social-buttons">
                                    <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
                                    <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
                                </div>
                                <p>or</p>-->
                                 <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                                        <div class="form-group">
                                             <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                             <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
                                        </div>
                                        <div class="form-group">
                                             <label class="sr-only" for="exampleInputPassword2">Password</label>
                                             <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
                                             <div class="help-block text-right"><a href="">Forget the password ?</a></div>
                                        </div>
                                        <div class="form-group">
                                             <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                                        </div>
                                        <div class="checkbox">
                                             <label>
                                             <input type="checkbox"><p>keep me logged-in</p> 
                                             </label>
                                        </div>
                                 </form>
                            </div>
                            <div class="bottom text-center">
                                <p>New here?</p>  <a href="#"><b>Join Us</b></a>
                            </div>
                     </div>
                </li>
            </ul>
            </div>
            </li>
            </ul>

希望你能帮忙

即使位置相对和z-index，我的导航栏下拉列表也没有覆盖我的标题

0 个答案: