Почему navbar при открытии отодвигает вниз страницу а не открывается поверх нее?

Question

[Qvei]

Подскажите в чем проблема?
Если зафиксировать Navbar (position:fixed) то при открытии его на середине страници она резко дергается вверх к навбару так как он не открывается над страницей а просто двигает ее вниз.
Я читал что за это отвечает z-index но что только не пробовал все бестолку... и ставил значение 9999 и убирал вовсе на всей странице z-index но навбар упорно не вылазит поверх..
Как правильно это настроить?

Comments

[Антон Литвиненко]

А навбар это вообще что у вас? Код в студию

[Qvei]

Антон Литвиненко,
Вот код. В навбаре (верхнее меню сайта) есть div выпадающий (dropdown) в нем поиск.. Навбар обычный с уроков вот: https://www.w3schools.com/howto/howto_js_topnav_re...

.navbar {
    font-family: "robotoregular";
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top:0;
    width: 100%;
}

.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px
}

.navbar a:visited{color:#ccc}

.aactive {
    background-color: #333;
    color: #463764
}

.navbar .icon {
    display: none
}

.navbar #logout-form {
    display: none
}

.dropdown {
    float: left;
    position: fixed;
    overflow: hidden
}

.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: 0;
    color: #333;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0
}

.dropdown-content {
    position: fixed;
    display: none;
    position: absolute;
    background-color: #333;
    width: 100%;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
    padding-bottom: 30px
}

.dropdown-content .navb {
    position: fixed;
    margin-top: 0;
    padding: 7px 0 0 0;
    text-align: center
}

.dropdown-content .navb .form-group {
    margin-bottom: 15px;
    margin-top: 0
}

.dropdown-content .navb .form-group input {
    width: 90%;
    height: 30px
}

.dropdown-content .navb .form-group p {
    margin: 15px 7px 15px 7px;
    font-weight: 300
}

.dropdown-content .navb .form-group p strong {
    color: #ccc;
    font-weight: 300
}

.dropdown-content .navb .form-group p span {
    color: #ccc;
    font-size: 16px
}

.navb .box {
    overflow-y: auto;
    max-height: 100vh;
    padding: 0;
    margin: 0;
    background-color: #72615d
}

.navb .box ol li {
    margin: 0 5px 10px 5px;
    padding: 0
}

.navb .box ol li a {
    color: #fff;
    font-weight: 500;
    font-size: 12px
}

.dropdown-content a {
    float: none;
    color: #ccc;
    text-decoration: none;
    display: block;
    text-align: left
}

.dropdown:hover .dropbtn,.navbar a:hover {
    background-color: #463764;
    color: #ccc
}

.dropdown-content a:hover {
    background-color: #463764;
    color: #ccc
}

.dropdown:hover .dropdown-content {
    display: block
}

@media screen and (min-width:1280px){.navbar .to{display:none}.navbar .mo{float:right}}

@media screen and (max-width: 1280px) {
    .navbar a:not(:first-child) {
        display:none
    }

    .navbar a.icon {
        float: right;
        display: block
    }
}

@media screen and (max-width: 1280px) {
    .navbar.responsive {
        position:relative
    }

    .navbar.responsive .icon {
        position: absolute;
        right: 0;
        top: 0
    }

    .navbar.responsive a {
        float: none;
        display: block;
        text-align: left
    }

    .navbar.responsive .dropdown {
        float: none
    }

    .navbar.responsive .dropdown-content {
        position: relative
    }

    .navbar.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left
    }
}

[Антон Литвиненко]

dropdown должен быть не fixed, фиксед только у самого меню, самой верхней обертки. fixed расчитывается от окна браузера. Собственно, вы что-то в стилях пишите, но не понимаете как оно работает.

.dropdown {
    float: left;
    position: fixed;
    overflow: hidden
}

все три свойства не нужны здесь. Может оверфлоу для чегото вам нужен, я код сильно не смотрел.
Родителю дропдауна popsition relative, самому дропдауну position absolute.
У вас какаято жуткая мешанина ненужных стилей
overflow hidden у nav наверно для того чтобы блок не схлопывался и это плохая практика (юзайте паттерн clearfix), так как он обрежет выпадающее меню, которое должно быть абсолютом
Очень рекомендую возьмите другой пример, не из 2000х

Answer 1

[Сергей Зенькович]

Если блоку установлено свойство position: fixed он не влияет на позиционирование других элементов, возможно открывающейся части у вас не присвоено данное свойство. Без видения кода не могу определить в чем проблема.

Comments

[Qvei]

Вот код навбара, как его поверх страници сделать? Не получается у меня, мало знаний

.navbar {
    font-family: "robotoregular";
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top:0;
    width: 100%;
  
}

.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px
}

.navbar a:visited{color:#ccc}

.aactive {
    background-color: #333;
    color: #463764
}

.navbar .icon {
    display: none
}

.navbar #logout-form {
    display: none
}

.dropdown {
    float: left;
    position: fixed;
    overflow: hidden
}

.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: 0;
    color: #333;
    padding: 14px 16px;
    background-color: inherit;
    margin: 0
}

.dropdown-content {
    position: fixed;
    display: none;
    position: absolute;
    background-color: #333;
    width: 100%;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
    padding-bottom: 30px
}

.dropdown-content .navb {
    position: fixed;
    margin-top: 0;
    padding: 7px 0 0 0;
    text-align: center
}

.dropdown-content .navb .form-group {
    margin-bottom: 15px;
    margin-top: 0
}

.dropdown-content .navb .form-group input {
    width: 90%;
    height: 30px
}

.dropdown-content .navb .form-group p {
    margin: 15px 7px 15px 7px;
    font-weight: 300
}

.dropdown-content .navb .form-group p strong {
    color: #ccc;
    font-weight: 300
}

.dropdown-content .navb .form-group p span {
    color: #ccc;
    font-size: 16px
}

.navb .box {
    overflow-y: auto;
    max-height: 100vh;
    padding: 0;
    margin: 0;
    background-color: #72615d
}

.navb .box ol li {
    margin: 0 5px 10px 5px;
    padding: 0
}

.navb .box ol li a {
    color: #fff;
    font-weight: 500;
    font-size: 12px
}

.dropdown-content a {
    float: none;
    color: #ccc;
    text-decoration: none;
    display: block;
    text-align: left
}

.dropdown:hover .dropbtn,.navbar a:hover {
    background-color: #463764;
    color: #ccc
}

.dropdown-content a:hover {
    background-color: #463764;
    color: #ccc
}

.dropdown:hover .dropdown-content {
    display: block
}

@media screen and (min-width:1280px){.navbar .to{display:none}.navbar .mo{float:right}}

@media screen and (max-width: 1280px) {
    .navbar a:not(:first-child) {
        display:none
    }

    .navbar a.icon {
        float: right;
        display: block
    }
}

@media screen and (max-width: 1280px) {
    .navbar.responsive {
        position:relative
    }

    .navbar.responsive .icon {
        position: absolute;
        right: 0;
        top: 0
    }

    .navbar.responsive a {
        float: none;
        display: block;
        text-align: left
    }

    .navbar.responsive .dropdown {
        float: none
    }

    .navbar.responsive .dropdown-content {
        position: relative
    }

    .navbar.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left
    }
}

[Сергей Зенькович]

HTML тоже отправьте!

[Danny Arty]

Qvei, а как без HTML-кода вам подсказку давать?)

[Qvei]

Сергей Зенькович,
Извиняюсь, вот:

<div class="navbar" id="mynavbar">
  <div class="dropdown aactive">
    <button class="dropbtn">
      &#128270;
    </button>
    <div class="dropdown-content">
      <div class="box navb">
     <div class="form-group">
      <input onclick="zion();" type="text" name="search" id="search" class="form-control" placeholder="введіть текст" />
      <p><strong id="dxada">Введено запитів:</strong>  <span id="total_records"></span></p>
     </div>
     <div class="box">
      <ol id="saasa" class="ol">
       </ol>
     </div>
  </div>
    </div>
  </div> 
  <a class="to" href="{{ url('/') }}">Головна</a>
  <a class="to" href="{{ url('/porivnjati-smartfoni') }}">Порівняння</a> 
  <a class="to" href="{{ url('/prowivkas') }}">Оновлення</a>
  <a class="to" href="{{ url('/ogljadis') }}">Огляди</a>
  <a class="to" href="{{ url('/stattis') }}">Статті</a>
  <a class="to" href="{{ url('/novinis') }}">Різне</a>
  <a class="to" href="{{ url('/newposts') }}">Пости</a> 
  @auth
  <a class="to" href="{{url('/newposts/create')}}">Створити пост</a>
  @endauth
  @if(Auth::check() && Auth::user()->role['id'] == "1")
  <a class="mo" href="{{url('/masters')}}">Master</a>
  @endif
  <a href="javascript:void(0);" class="icon" onclick="myFuunction();">&equiv;</a>
  @guest
  <a class="mo" href="{{ route('login') }}">{{__('Логін')}}</a>
  @if (Route::has('register'))
  <a class="mo" href="{{ route('register') }}">{{__('Реєстрація')}}</a>
  @endif 
  @else
  <a class="mo" href="{{ url('/userposts') }}">
    &#129333;&#160;Профіль
  </a> 
  <a class="mo" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
    &#128099;&#160;Вихід 
  </a>
  <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf</form>   
  @endguest 
</div>

[Qvei]

Danny Arty, добавил к коментам

[Qvei]

.navbar.responsive {position:frelative} в этом проблема была. Спасибо за помощь всем