View Full Version : CSS positioning and z-index?

01-26-2005, 07:15 AM
As it is right now, I have a drop-down javascript menu that is covered by a flash banner directly underneath it, in such a way that if you try to access the different levels of the javascript menu, you can't because the flash banner is hiding them....

See this page to see exactly what I'm talking about:


Can someone show me an example of how I could use CSS positioning and z-index to fix this problem...I attempted this, but am having difficulties...


01-26-2005, 08:08 AM
Unfortunately you can't fix this with z-index.
Here's the fix: http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx

01-26-2005, 09:57 AM
Heh... I'd say, get rid of the banner altogether; it annoys the pants off of me... Or at least relocate it, like anywhere above your menu bar.

01-26-2005, 10:48 AM
Seriously, maybe you should wear a belt.... :eek:

I cannot ditch the banner completely -- I have my reasons....

I've been playing around with putting the banner elsewhere, but above the toolbar is out of the question....it needs to be visible when the visitor first comes to the page, but it shouldn't disrupt the site design template...I'd love nothing more than to move the banner somewhere else and avoid the above problem, but I really don't know where else to put it....

The banner itself is rough around the edges....It will look nicer in the future...but for now, I need to figure out how to fit it nicely in the page...

01-26-2005, 12:02 PM
Unfortunately you can't fix this with z-index.
Here's the fix: http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx

Seems like a good fix, but I'm not that adept with DHTML (outside of the DHTML code generated by script editors)....I went to this page (http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx) to try and adjust the code in their example to fit my page, but I can't seem to get it to work...Even with the invisible iframe in there, the div tags surrounding the flash banner set similarly, and the DHTML code in the header, the javascript menu levels are still covered by the banner....

I'm at a loss, and unfortunately I don't have the current know-how to proceed much further than I already have...If someone could walk me through how I might apply the above example code to my page, I would be very grateful....

Note: The code on my site doesn't have the DHTML in it because I was attempting to fix the page off-line...If you want me to post the code that I have so far, I will if you think it will help....


01-26-2005, 10:41 PM
How do I transfer this message thread to the javascript programming forum, without double-posting? My questions really don't pertain to HTML/CSS anymore...


01-26-2005, 11:29 PM
Just email or pm a moderator, they'll get it taken care of for you :)

01-27-2005, 02:36 AM
Moving per user request...


01-27-2005, 02:32 PM
Ive seen some site tackle this problem before.. except it was with an annoying form i believe instead of flash.. but the principle should be the same

when your menu appears you just style.display='none' or style.visiblity='hidden' the banner object... and when the menu disappears you just turn back on display for your banner...

this may not be exactly what you are looking for but it _should_ work.

(note to keep formatting space you should have the banner in a specificallly sized container element of some kind)


I see now that is what the code in your link is doing.. except you don't need an iframe.. any parent tag containing your banner will work as a 'shim' to hold the width and the height in place when your banner is turned off....

even another trick you could do other than actually turn the sucker off is to move it off screen... when the menu loads you could simple set the margin-top and margin-left of the banner to be -9999em or something, so it would not render in a place that could overlap your menu. again it would have to be in a container 'shim' element to hold the position for it upon returning