I have read severals questions/articles about z-index on stackoverflow, but I am still unable to solve last problem with z-index property on my webpage.
The simple question:
Does element with position:absolute always overlap the element with postion:relative, no matter of value of their z-index?
I need to force element with position:relative;z-index:50 to overlap the element with postion:aboslute;z-index:5;. I would even use script if necessary.
There is webpage with that issue: sample page
Note: That webpage is highly based on z-index, and there is a lot of not elegant css solutions (sticky footer, background repeat). I it’s almost working but as you can see, the <div id="mainContent"> some text </div> have position relative and have negative bottom margin to overlap the footer. But the footer (<div id="footerFixWrapper"></div>) have absolute postion, and its overlaps mainConetnet no matter it have lower z-index.
It looks as if the divs exist in different stacking contexts. In this situation, z-index will not affect either in relation to each other.
CSS-Discuss Wiki has the details: http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex