title: Bring div to front on fixed position
body: <p>I used <code>fixed</code> <code>position</code> for a <code>div</code> in a webpage to stick the <code>div</code> as a a header on the top, but on scrolling it comes behind all other objects like <code>divs</code>, videos and even text!</p>
  
  <p>Here is the <code>div</code> as it should look at all times:
  <img src="https://i.stack.imgur.com/VnvaB.png" alt="div as it should look at all times"></p>
  
  <p>How the <code>div</code> hides when it is scrolled down:
  <img src="https://i.stack.imgur.com/LoF3N.png" alt="div hides when it is scrolled down"></p>
  
  <p>So, I just thought of the basic structure that if I write that particular <code>div</code>'s code in the starting (which I did) and then other objects', the other objects will naturally come in front. So, one solution could be to write its code at the end. But, I have a structural code with proper placed comments in between and this could spoil it.</p>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;div style="width: 1409.25px; height:40px; top:0; left:0; position:fixed; background-color:black; line-height:2;"&gt;..Text here..&lt;/div&gt;
  </code></pre>
  
  <p>Is there any way to bring the <code>div</code> in front when scrolling without writing its code at the end?</p>