Неограниченная навигационная панель перед изображением

Question

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

(PS: Изображение не фон!)

<nav class="navbar " role="navigation"> 
<div class="container-fluid"> 
    <div class="collapse navbar-collapse navbar-right navbar-main-collapse"> 
     <ul class="nav navbar-nav"> 
      <li> 
       <a> Link </a> 
      </li> 
      <li> 
       <a> Link </a> 
      </li> 
      <li> 
       <a> Link </a> 
      </li> 
      <li> 
       <a> Link </a> 
      </li> 
      <li> 
       <a> Link </a> 
      </li> 
     </ul> 
    </div> 
</div> 
</nav> 
<img src=" "> 

Answer 1

Это должно работать:

.navbar { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

См: https://jsfiddle.net/tcybj6sj/

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