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

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 🙂 🙂

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...