title: Blazor top Nav row -> how to prevent other elements hover over it?
body: <p>I created a new Blazor server-side project.
  So default clean layout.
  I wanted to make a <code>card/column</code> layout on my page.
  But when the page is getting big, I can scroll the page, so when I scroll down, the "card" will hover ABOVE the top row menu bar. That is the same issue when using "div class col"for example.
  <a href="https://i.stack.imgur.com/KrmHs.png" rel="nofollow noreferrer">Example to make it more clear</a></p>
  
  <p>It does not happen when I use <code>img</code> tag, so if I would make 10 big images between the <code>img</code> tag to force the website to have a scrollbar, the images are behind the top row menu.</p>
  
  <p>But just between a "div" with no col, that is still fine, but is not, this will hover OVER the top row.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-1"&gt;
          &lt;img class="card-img-top" src="Images/63.gif" style="max-width:100%;"&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So how can I make sure that the top row bar is ALWAYS on top and that everything will always be behind it like when using a simple <code>&lt;img&gt;</code> tag?</p>
  
  <p>Thank you!</p>