Jump to content
Maxi_Mega

Sticky headers

Recommended Posts

Hello everyone,

 

I was searching for a technique to make an element on my html page staying at the same place even if we scroll the page.

I found 2 methods :

This one and this one.

What is the difference between these two techniques ? (apart from how it's coded)

 

Also, I have a problem with these methods : when we scroll down, it stay at the same place  - that's nice -  but the rest of the page goes in front of my sticky element and not behind, like it does on the two methods I mentioned before.

 

Have anyone an answer to my to questions ?

 

 

Thank you in advance,

 

Maxi_Mega

 

PS: Sorry for my english, I'm french :s

Share this post


Link to post
Share on other sites

If your other elements are using the property position: such as position: relative;( it should not be using position: absolute;) the header and the other element become layered, to combat this you should use the property z-index:. This has the ability to make a element layer lever higher than the next so is has higher precedence over the other elements. Give position: fixed; header z-index: 50; the others z-index: 10; this should fix this problem.

Share this post


Link to post
Share on other sites

I tried, it worked at 50%. I think that my problem comes from the css file that I use... So  can't do anything ^^ but thanks anyway 😃

 

Maxi_Mega

Edited by Maxi_Mega

Share this post


Link to post
Share on other sites

If it is a css file, you should be able override it, simple by referring to parent element id or class name that will give it a higher precedence over the current.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×