Z-index is causing incorrect stacking

Question

I have a calendar at the following page:

http://www.plumgrid.com/calendar/category/events/2016-03/?tribe_events_cat=events&tribe-bar-date=2016-03

When we mouseover the event on March 2nd "OpenStack Meetup | Washington, DC", the popup goes behind the header banner image.

I have looked into the z-index and the opacity, and tried to figure out whats going wrong in terms of stacking order and context but cannot find a solution.

Any ideas?

http://stackoverflow.com/questions/30185273/stacking-order-of-elements-affected-by-opacity — Paulie_D, Feb 16 '16 at 12:47

score 2 · Answer 1 · answered Feb 16 '16 at 12:30

2

For z-index to have any effect on stacking, the element should have the attribute position to relative or absolute.

answered Feb 16 '16 at 12:30

Juan

131
1
7

score 2 · Accepted Answer · answered Feb 16 '16 at 12:32

2

It's simple, you have an overflow hidden on the div with id "main"

So even with a z-index, the div is hidden when outside the box (try commenting the line 7743 of style.css)

answered Feb 16 '16 at 12:32

Ianis

1,165
6
12

1

This is the line: `.tribe-filter-live #main { overflow: hidden; }` – Aziz Feb 16 '16 at 12:33
Thank you so much Aziz - sometimes the mind gets totally stuck at generating ideas. – Meeyam Feb 17 '16 at 11:07

Z-index is causing incorrect stacking

2 Answers2