I've encountered a dilemma with my webpage layout. I have placed an image at the top, but I also want to add a navigation bar on top of the image. The issue is that the navigation bar appears above the image instead of in front of it. While I can use position: fixed to place the navibar at the top, it becomes troublesome when scrolling. Is there a solution to this problem?
(PS: The image is not being used as a background!)
<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=" ">