Bring div to front on fixed position

Question

I used fixed position for a div in a webpage to stick the div as a a header on the top, but on scrolling it comes behind all other objects like divs, videos and even text!

Here is the div as it should look at all times:

How the div hides when it is scrolled down:

So, I just thought of the basic structure that if I write that particular div'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.

This is the code:

<div style="width: 1409.25px; height:40px; top:0; left:0; position:fixed; background-color:black; line-height:2;">..Text here..</div>

Is there any way to bring the div in front when scrolling without writing its code at the end?

Answer 1

You need to add a z-index, this will put the divs into z space based on the z-index value,

Example:

<div id="a" style="z-index:10"></div>
<div id="b" style="z-index:1"></div>

Div a will be placed above Div b as it has a higher z-index.

Here is a simple JSFiddle example - https://jsfiddle.net/ta2gbn4m/