How do I put a fixed-position element on top of a relative positioned element?

Question

Is it even possible? I made a header for my site position at "fixed". The i also have an image positioned at "relative". Whenever I scroll the site.... I noticed that the image was layered "above" the header. Even the twitter profile widget i placed was above the header. They both overlap the header and i dont want that. Any idea on how to resolve my problem? please HELP!

Btw.... ive heard that "fixed" is buggy esp in Android, where I am making my site.

Answer 1

You'll need to use z-index to set the layering, something like this:

.menu {position:fixed; z-index:99999}
.content {position:relative; z-index:1}

Then you can fine tune it by using numbers in between.