Placing a div over a jQuery image slider

Question

I'm trying to place a div element over the a jQuery Tools Scrollable image gallery. I've got everything placed in the right way, however the div doesn't appear on top of the jQuery object even if I set z-index: 2. Here's my code:

div#wrapperContainer{
display: table;
overflow: hidden;
margin: -5px auto;
}

//this is the div i'm trying to put on top of the jQuery Tool
div#wrapper {
display: table-cell;
vertical-align: middle;
z-index: 2;
width: 1024px;
height: 192px;
background-color: #525252;
-moz-box-shadow: 0px -10px 50px #000; 
-webkit-box-shadow: 0px -10px 50px #000; 
        box-shadow: 0px -10px 50px #000;
}

//this is the CSS for the jQuery Tool

.scrollable {
position: relative;
overflow: hidden;
width: 940px;
height: 528px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
        border-radius: 10px;
}

.items {
width: 20000em;
clear: both;
position: absolute;
}

.items  div{
float: left;
width: 940px;
height: 528px;
}

do you want this done with pure css or are you ok using jQuery? — Greg, Nov 08 '11 at 23:00

Shomz · Answer 1 · 2011-11-09T17:27:12.893

3

Can you position the wrapper div absolutely? If so, that should take care of it, along with a proper z-index.

See the positioning example here.

edited Nov 09 '11 at 17:27

answered Nov 08 '11 at 23:55

Shomz

37,421
4
57
85

1

I'd go with this one too. The scrollable is already relative, make the new one absolute and put a high z-index. – Yisela Nov 09 '11 at 11:22
can I keep the div center if I position it absolutely? – Massimo Bortone Nov 09 '11 at 14:33
You can't center it the regular way (like you do with relatively positioned elements), but you can position it using margin-top and margin-left parameters. – Shomz Nov 09 '11 at 17:20
I've already tried that, but it messes up my design if the window gets resized. I've got to find another solution or rethink the design. – Massimo Bortone Nov 11 '11 at 20:26

score 0 · Answer 2 · edited Jul 30 '12 at 07:49

0

Take a look at jQuery.toggle().

edited Jul 30 '12 at 07:49

bluish

26,356
27
122
180

answered Nov 08 '11 at 23:18

Greg

8,574
21
67
109

I don't think this might help, maybe I haven't described the problem correctly: I need to show both the jQuery Tool and the div, which I want to be laying on top of the jQuery Tool, but hiding it only partially. – Massimo Bortone Nov 08 '11 at 23:40

Placing a div over a jQuery image slider

2 Answers2