I’ve read quite a lot of posts regarding the issue of submenu’s hiding behind DIV’s when used in inline box model layouts. I’ve tried the suggestions given in these threads without result. I might be doing something terribly wrong here but for some reason there doesn’t seem to be another solution here than make the CSS Menu a layered item … what I absolutely don’t want.
Is this really the only option I got here? Try menu item ‘Teams’ in the lower link …
In your case you have 2 Divs (“header-container” and “content-container”) in the Parent “container” - it is the relative z-index of those 2 you need to alter.
The thing to realize is that z-index is relative. If you have nested an element inside another element, and then apply z-index to the innermost child, the highest it can ever rise in the overall page stacking order is relative to its nearest parent. Imagine this:
What’s the visual stacking order? If you think that the box with z-index 1000 will be on top, you will be surprised to find that the top-most thing is the div with z-index 2. Within the first child div, the item with z-index 1000 will in fact rise above its peer (with a mere 50 z-index), even though the source order alone would have put that item above the first. But because the z-index of 1000 is constrained by its parent element (with its 1 z-index) it can never rise above the other elements on the page.
Walter
On Oct 27, 2013, at 7:30 PM, DeltaDave wrote:
not sure I’m making sense here
We understand what you mean
In your case you have 2 Divs (“header-container” and “content-container”) in the Parent “container” - it is the relative z-index of those 2 you need to alter.
Thank you Walter, I had to read that twice (still didn’t have my coffee), but it absolutely makes sense to me. It is something I will have to keep in mind though, I’ll probably will forget it the first couple of times
It occurred to me that z-index is present on some DIV’s (nag-top for example), but I don’t understand (yet) why z-index is applied in a inline box model layout. When layered, it makes sense to me … there is a stacking order. This is something I really need to sort out for myself
You can (and always do – to at least one level) nest one div inside another without making an inline layout. All drawn layered elements on the screen are children of the #PageDiv, for example. You can draw a layered element, then highlight that element and draw another layered element over the top of it. The two elements are now nested (in terms of the HTML source code) but are both still positioned absolutely. The second, however, is positioned RELATIVE to its parent. If the first box you drew was positioned at 200, 100, and the second was positioned at 250, 150 relative to the page, its actual x and y would be 50, 50 in the CSS.
If you have z-index in play in a truly inline (relative-positioned) layout, you can use that to change the way that elements appear (particularly if they are floated). You can have things appear in one order in the source code, and completely another in terms of the visible layout.
Walter
On Oct 28, 2013, at 6:56 AM, Richard van Heukelum wrote:
It occurred to me that z-index is present on some DIV’s (nag-top for example), but I don’t understand (yet) why z-index is applied in a inline box model layout. When layered, it makes sense to me … there is a stacking order. This is something I really need to sort out for myself
