Nested z-index issue
I have a fixed positioned footer bar at the bottom of my site. This will always remain at the bottom of a users browser.
I have a DIV (#homemenu) which contains content but by default this DIV needs to be hidden offscreen slightly below and behind the footer sowhen a user hovers overs the bit of the DIV sticking out (#homefeature), the DIV slides up using jquery. When they mouseout from the panel, it slides back into position behind the footer bar. Well , thats the plan anyway!
Here is my HTML:
I have everything working except that the #homemenu DIV is appearing ONTOP of the footer bar. Now I have read that any sibling of a parent cannot be positioned below its parent, it can only be positioned below content of its parent, so this is my problem.
<a href="" class="opaque">Feature</a>
<img src="/repository/file.jpg" />
Can anyone offer advice as to how I can keep my #footer with a fixed position but get the #homemenu to appear below it without creating a verticle scrollbar in the browser?