how can I prevent content from shifting around when javascript shows/hides element?

marcnyc

I have a javascript onmouseover() that shows and hides an element... When I go over the text that has the onmouseover action and the element is shown, the whole page and all its contents and div's shift and slide down to make room for that element...
how can I prevent that from happening so the element just shows up on top of everything else?
I have tried applying z-index: 10 and overflow: show to the div that contains the element but had no luck and I am at a loss cause I am only a do it yourselfer
any help or nudge in the right direction would be greatly appreciated!

Weedpacket

The first link I got when I googled for CSS popup

Bonesnap

You can use the CSS visibility property, which will hide an element but it will still occupy its "space".

EDIT: In comparison, display: none; will also hide the element, but the "space" it occupies will be nothing, so other elements will shift/move to occupy the space.

Weedpacket

Also, the element needs to have absolute positioning to take it out of normal content flow.

marcnyc

I read the link you posted, Weedpacket, and I understand what you mean, Bonesnap, however that's not exactly what I'm trying to do. You are suggesting that I allocate a space big enough for whatever is hidden so that when the hidden element appears the content doesn't shift. I would like the content not to shift but I would like the hidden element to be displayed on top of the other content... Basically I'm trying to do a menu with drop downs... I have it working except for the fact that the page content shifts when the drop down menu appears, when instead I'd like it to overlay the rest of the page.
Because this menu is in a place that might change with images and other content (logo) before it, I need it to have a relative positioning.

Weedpacket

Something like the one here? (Note that that particular one is five years old, so it jumps through more hoops than may be necessary today; another one of similar vintage gets to be a lot simpler by not bothering to support IE5/6. Both are older than Firefox, but still work fine there. Needless to say, there are more than two examples on that site, quite a few of them more recent.)

johanafm

marcnyc;10993094 wrote:
I have tried applying overflow: show

Also note that overflow has no show value. It can take one of the five following: visible, hidden, scroll, auto, inherit. The purpose of the overflow attribute is only on how to deal with content which goes outside the containing box.

marcnyc

I have looked at those examples and they are intriguing but I already have a functioning drop down menu that (although it uses a bit of JS) works for what I need it to do. For this project I cannot stray away from relative positioning... I have a 'menu' DIV and inside that layer I have my drop down menus made of blocks that are made visible or hidden via JS... is there a way to keep my JS show/hide functions but make the appearing blocks appear over the content that comes after instead of shifting the remaining page content down?

johanafm

marcnyc;10993227 wrote:
is there a way to keep my JS show/hide functions but make the appearing blocks appear over the content that comes after instead of shifting the remaining page content down?

Yes

Weedpacket;10993143 wrote:
the element needs to have absolute positioning to take it out of normal content flow.

marcnyc

so there is absolutely NO way to do this without using absolute positioning?

sneakyimp

Probably not. It'll have to be absolute or fixed unless you are OK with it taking up space within the flow of your page.

traq

that's what "absolute" positioning is for. why do you object to the idea?