Z-index not working

I’ve successfully used z-index before, but for some reason it is not working with my video content. I would like the Video Content Wrapper to sit on top of the Video Image Wrapper upon animation. The Video Content Wrapper has a z-index of 999 and no other content has a z-index setting. Anyone have a clue as to why this isn’t working?

I’m focused on the On Demand Video Section at the bottom of the page, but it applies to all my video sections.

Read Only Link

Hey Michelle,

I just looked at your read-only link, and it looks like the z-index is ok as is, and can you instead try setting the position of the “Video Content Wrapper” to be absolute? When I did that on my end, it is position on top of the video as you noted above.

@Corey_Moen Thank you for working on this issue. I made the change for the “Video Content Wrapper” to absolute, but the wrapper is still displaying below the image in the second row.

Happy to help Michelle!

I took another look at it and I believe I found a way for it to work, and I walked through my approach and the solution in the recording below:

2 Likes

Hello Corey,

You were correct that the problem was the z-index of the collection item being set to 0. Once I changed that to auto, the layout worked exactly like I wanted. Thank you so much for taking the time to make this video. I learned a lot about z-index and hope others who find this thread will also benefit from the effort you invested.

With cheer,
Michelle

Awesome!! Thank you so much for reporting back and I am thankful to hear you sorted it out!