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
margin: 0px 0px 0px 0px;
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:
Maybe I can't have the slide under and the gallery at the same time.
Would an inline frame be the answer?
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 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.
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?
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?
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.
Powered by vBulletin® Version 4.2.2 Copyright © 2016 vBulletin Solutions, Inc. All rights reserved.