Question

I have a simple absolute positioning of ‘s via CSS including z-index
HTML:

<div id="one"> test </div>
<div id="two"> test </div>
<div id="three"> test </div>

CSS:

#one{
height: 200px;
width: 150px;
background: #a8d14f;
position: absolute;
left: 10px;
top: 30px;
z-index: 10;
}
#two{
height: 200px;
width: 150px;
background: #f97273;
position: absolute;
left: 150px;
top: 30px;
z-index: 15;
}
#three{
height: 200px;
width: 150px;
background: #43b8b0;
position: absolute;
left: 300px;
top: 30px;
z-index: 12;
}

Needed:
OnClick change some of CSS properties for selected like position, z-index, background

Answer 1

Here’s an example of an onclick event for the one element, which will change its z-index.

$(function(){
  $("#one").click(function(){
     $(this).css("z-index", 2);
  });
});

From this you should be able to work out how to do the rest. If not, then look into the use of jQuery more. We’re not here to do the work for you.