Question

82

Bring div to front on fixed position

rated 0 times [ 87] [ 5] / answers: 1 / hits: 18154 / 9 Years ago, tue, june 23, 2015, 12:00:00

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:
div

How the div hides when it is scrolled down:
div

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaya

Add To Favorites

Follow

Total Points: 531

Total Questions: 107

Total Answers: 100

Location: United States Minor Outlying Island

Member since Sat, May 28, 2022

2 Years ago

answered 9 Years ago tomas · Accepted Answer

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/