HOW TO CHANGE Z-INDEX USING JQUERY ONCLICK FUNCTION

We are using simple jquery css method. Z-INDEX give preority to element that witch one will appear first. z-index only work with position absolute, relative, and position fixed.
    .There is many way to do like this you can use display:block and display:none; for this action.

HTML CODE

<button id="green">GREEN</button>

<button id="red">RED</button>

<div>

    <div id="box" style="background:green; height:100px;width:100px;z-index:1; position:absolute;" ></div>

    <div id="box1" style="background:red; height:100px;width:100px;z-index:2; position:absolute;"></div>

    

</div>

JQUERY CODE

<script>

$(document).ready(function(){

    $("#green").click(function(){

        $("#box").css("z-index", "2");

        $("#box1").css("z-index", "1");

    });

$("#red").click(function(){

        $("#box").css("z-index", "1");

        $("#box1").css("z-index", "2");

    });

});

</script>

You have to include this link in head tag
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>