图像前面的无固定导航栏

Question

我已经在页面顶部放置了一个图像，但我也想在页面顶部（图像前面）插入一个导航栏。但事实上，导航栏在图像上方，我不能把它们放在同一行，我可以把导航栏固定在顶部，但当我向下滚动时，这真的很烦人。有什么办法解决我的问题吗？

（附言：图像不是背景！）

<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将导航栏定位在页面内的固定位置。