I have a quick question for CSS experts here.
Let’s say you have the following page setup.
[Header]
[Navigation]
[Main Body]
[Footer]
Let’s say you’re using floats in a page to create your typical two column layout in the middle [Main Body] part of the page.
Within the [Header] part of the page, there is a <div> that has a relatively positioned image. Ideally, I’d like the image to be hovering “on top” of the [Main Body]. I’ve tried using z-index in the <div> bring this image to the front but it always remains “under” the floated blocks.
What’s the rule on using floats and z-index positioned elements together? Will floats always be on top? Or, is it a “contextual” problem where the float is setup after the [Header] part of the page is rendered so it will always be on top?
Now, I typically wouldn’t do it in this fashion but the “admin tool” my client uses requires that this image be called from within the [Header] section…yeah, it’s screwy.
I’ll see if I can whip up an example of this a little later today if my explanation seems weird.
Any insight into this problem would be helpful.
Thanks!