How To Give A Div A Higher Z-index On Click With Js?

I asked this question yesterday hopefully this one is clearer as I've now provided a working example of my store. I'm developing a Shopify Theme. I've been using Timber as my base

Solution 1:

The approach would be like this:

$('.yourselector').css('z-index', '999');

Add it (and adapt it to your needs) inside your onclick() function.

Solution 2:

if you need to modify the z-index of your div when clicking a buton, you shoud put in this code on your onclick() function, else if you need to activate it when you looding the page you shoud put it on a $( document ).ready() function , the code is :

$('#yourID').css('z-index', '10');

Solution 3:

You can use:

document.getElementById("your-element-id").style.zIndex = 5; 

It's pure Javascript and sets the z-index to 5. Just bind this to onClick event!