Nav Bar не отображается как блок

Question

По какой-то причине мой навигатор с использованием темы начальной загрузки не отображается как блок. Я использую шаблон карусели для своей страницы index.html и хотел использовать ту же тему на остальных моих страницах, без карусели. Однако, когда я вывожу карусель, мой второй div сидит под моей навигационной панелью.

Вот код для моей навигационной панели:

<div class="navbar-wrapper"> 
    <div class="container"> 

    <nav class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html">Ecstatic Entertainment SK</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="index.html">Home</a></li> 
      <li class="active"><a href="">What We Offer</a></li> 
      <li><a href="#contact">Build Your Event</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

    </div> 
</div> 

и ссылка на мою скрипку, с моей CSS поверх начальной загрузки CSS:

https://jsfiddle.net/czz2Lm1n/

Answer 1

Ваш навигационный бар ДИВ (.navbar-wrapper) фактически является блочный элемент, но он также абсолютно позиционирован.

Следовательно, оно было снято с normal flow, и другие divs игнорируют его. Таким образом, ваш контент («второй div») переместился на край тела, так как он не видит другого окна, чтобы остановить его.

В своем коде, один быстрое решение, чтобы изменить значение свойства положения для класса:

Оригинал

.navbar-wrapper{position:absolute;top:0;right:0;left:0;z-index:20} 

Пересмотренный

.navbar-wrapper{position:relative;top:0;right:0;left:0;z-index:20} 

Это работает. Вот ваша скрипка, редакция: https://jsfiddle.net/czz2Lm1n/3/

Теперь вы можете использовать position:absolute все дочерние элементы .navbar-wrapper, и они будут позиционировать по отношению к охватывающему блоку .navbar-wrapper.

Если вы хотите узнать больше о position собственности здесь хорошая статья: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Надеется, что это помогает. Удачи!

Answer 2

удалить NavBar-обертку и контейнер.

<nav class="navbar navbar-inverse navbar-static-top"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="index.html">Ecstatic Entertainment SK</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
       <li><a href="index.html">Home</a></li> 
       <li class="active"><a href="">What We Offer</a></li> 
       <li><a href="#contact">Build Your Event</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li role="separator" class="divider"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
      </div> 
      </div> 
     </nav> 

здесь скрипку: https://jsfiddle.net/czz2Lm1n/2/