Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Joseph Hall
Joseph Hall
10,865 Points
Posted by Joseph Hall
Joseph Hall
10,865 Points

Stacking of video controls and div:hover elements

I am trying to have video controls show up on top of my div container for another panel. Please see the picture below.

http://i.stack.imgur.com/RSthQ.jpg

The control panel has the following css/sass

.panel-container{ position: absolute; bottom: 0; height: 140px; left: 0; right: 0; z-index: 2; background: rgba(0, 0, 0, 0.4); padding: 10px 20px; font-weight: 100; color: white; opacity: 0; &:hover { @include transition-delay(0s, 0s); opacity: 1; } }

The video controls have the following CSS/SASS

.mejs-controls { z-index: 100; }

However no matter the z-index, the video controls are not clickable. What can be done to make the video controls appear on top of the panel-container (and the panel-container needs to be above the video itself).

Guil Hernandez

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I suspect you may need to post the html for the video player and where you've placed your panel-container div in relation to that. Are you using mediaelementjs?

2 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Joseph,

Is the control panel something custom you've added and not part of the video player? Do the controls work when you take this out?

Does the .mejs-controls element have a positioning context set? z-index has no effect on an element if it doesn't have relative, absolute, or fixed positioning set. If no positioning has been set then you'd probably want to go with relative.