View Full Version : how to slide an object under a div

05-23-2012, 07:55 AM
I am trying to make an object slide under a div at the top when you scroll down the page. Text and images go under the top div, but objects don't seem to.

I have tried adding z-index:9999 z-index:1 to the object and the div respectively, but it doesn't work.

A demo is here:


Can anyone tell me if it's at least possible?

05-23-2012, 04:11 PM
#col-right {
width: 742px;
float: right;
margin: 0px 0px 0px 0px;
z-index: -1;
position: relative;

05-24-2012, 04:49 AM
perfect - thank you

05-24-2012, 10:57 AM
It works well with the object in the demo above, but on a page with a free gallery maker I am using, it stops the gallery from working:


Is there another simple fix? I notice there are z-index references in the gallery's javascript file: galleria.classic.min.js

Maybe I can't have the slide under and the gallery at the same time.

Would an inline frame be the answer?

05-24-2012, 11:15 AM
Setting z-index of -1 will make the element unclickable, which is why your gallery no longer functions.

Assign #section-head z-index of 2, and #col-right z-index of 1.
Then #section-head will appear on top.

05-24-2012, 11:28 AM
I see.

I have updated the demo to reflect your changes. It still fails so I suspect it is some conflict with the z-indexes in the galleria js.

05-24-2012, 11:40 AM
You still have z-index for #col-right set to -1 on line 52 of style.css.
All the z-indices within the galleria apply to elements within #col-right and won't affect the relative z-indices of #col-right and #section-head.

05-24-2012, 11:55 AM
You're perfectly right. My demo was not meant to include that css reference.

Works well now. And I've learnt a lot.


06-21-2012, 03:19 PM
I have another similar problem. This time I require a flash object to slide under the menu. Nothing I do with z-indexes seem to get it sliding under the menu as does the <div class="right-content"> it sits on.

Can anything be done about it?


06-21-2012, 05:39 PM
It's OK in FF13, although at the moment it shows behind #section-head as that element has neither a background colour nor a (valid) background image.

Are you seeing something different?

06-22-2012, 02:00 AM
Thanks. I have made the images valid.

Yes, FF does the right thing. It seems to be an IE and Chrome problem.

Is there a workaround for these browsers?

06-22-2012, 08:36 AM
OK, have a try adding the following within your object tag:

<param name="wmode" value="opaque">

06-22-2012, 09:26 AM
That did the trick. Thanks very much.