Z-Index, iframes, Opacity, Oh My!

So I recently encountered the following issue: CUSP has a couple of spots where they are embedding youtube videos. If I clicked play on the youtube video & then clicked “view in fullscreen mode” – some of the site’s absolutely positioned elements (in particular those with z-index values) were overlapping the youtube player!


If you see in the screenshot, the header and that curves div are sitting on top of the video player. Yuck!


I thought this could be fixed by tweaking the z-index values, but nope – so some googling led me to the following:

This stack overflow thread suggests that this is issue is caused by the opacity and animation inherited by the wrapper wow classes I had applied.

This article demystifies the wonderful world of z-indexing. Good to know!