What am I doing wrong with this z-index?

HTML & CSS
1

Hi,

I’m a bit baffled with this one.

On “By Subject” or “By Media Type”, you can see it has a popout, which has a sub-menu of all the items. This is all good - apart from the fact its showing up partly behind the “caption” on the bootstrap carousel.

I have a z-index set for them:

#sidebar #media_type_box {
.....
  z-index: 2001;
}

#sidebar #subject_type_box {
.....
  z-index: 2001;
}

…and the carousel only seems to have a z-index of 10… so what am I doing wrong? I’m at my wits end!

TIA

Andy

2

Though I can’t give you the code, I would suggest looking at the styling for the caption you have for that photo

3

Hi,

Ultimately its the z-index of the furthest positioned parent that creates the stacking context for all of its children (if such a parent exists). In your example #sidebar has a z-index of 2 so that means all children of the sidebar cannot overlap other elements on the page that are within contexts greater than 2. You need to set the z-index of #sidebar to be higher than the element you want to overlap.


#sidebar{z-index:11}

(As an aside remember that only positioned elements can have a z-index applied)