Как сделать так, чтобы выпадающая форма в панели навигации появлялась поверх других элементов страницы? - PullRequest
Новая
       24

Как сделать так, чтобы выпадающая форма в панели навигации появлялась поверх других элементов страницы?

0 голосов
/ 10 апреля 2019

Я использую Visual Studio 2017 в .NET Framework с начальной загрузкой 4.1. Я попытался поместить выпадающее меню в панель навигации, но оно постоянно отстает от других элементов на странице.

Первоначально у меня был выпадающий список в общих настройках div, который я изменил на более конкретную навигацию. Я пытался использовать overflow-auto, но все, что он сделал, - это создал окно мини-прокрутки, которое настолько мало (не говоря уже о том, что оно некрасиво), что его содержимое невозможно просмотреть. Добавление класса с фиксированной вершиной также не помогло в этом. На странице начальной загрузки, посвященной навигации (под позиционированием), они предупреждают против изменения z-индекса, который в настоящее время равен 1000. Я все еще прилично новичок в этой структуре и волнуюсь по поводу работы с z-индексом. Есть ли другой способ показать раскрывающийся список?

Это тестовый сервер песочницы: http://70.163.32.104/

<nav class="navbar-top fixed-top">
            <div class="row">
                <div class="col-sm-4 text-left">
                    <a href="/">Home</a> <a class="mx-3" href="/catalog">Shop!</a>
                </div>
                <div class="col-sm-8 text-right">

                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="loginDropdown" aria-haspopup="true" aria-expanded="false">Login</button>
                        <div class="dropdown-menu" aria-labelledby="loginDropdown">
                            <form class="px-4 py-3">
                                <div class="form-group">
                                    <label for="loginDropdownFormEmail1">Email Address</label>
                                    <input type="email" class="form-control" id=loginDropdownFormEmail />
                                </div>
                                <div class="form-group">
                                    <label for="loginDropdownFormPassword1">Password</label>
                                    <input type="password" class="form-control" id="loginDropdownFormPassword1" />
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="loginDropdownCheck" />
                                    <label class="form-check-check-label" for="loginDropdownCheck">Remember Me</label>
                                </div>
                                <button type="submit" class="btn btn-primary">Login</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
...