html Sticky headers

[Maxi_Mega]

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

[dsonesuk]

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.

[Maxi_Mega]

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 October 22, 2018 by Maxi_Mega

[dsonesuk]

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.

[Maxi_Mega]

That's what I did ... But nope ...

 

[Maxi_Mega]

Hi dsonesuk,

I finally found how to solve my z-index problem : I just have to put "!important" after my z-index value and that's all ^^

 

In any case, thank you for your help 🙂 🙂