how can bring to front clicked div in jquery?

I want bring to front div which is clicked , how can do that?

Here i added some divs in HTML:

<div class="div1">A</div>
<div class="div2">B</div>
<div class="div3">C</div>

i set size of div in here with CSS Code:

div {
    width: 100px;
    height: 100px;
    background-color: #666;
    border-color: #333;
    border-style: solid;
    position: absolute;
    line-height: 100px;
    text-align:center;
    font-size:50px;
}
.div1 {
    left: 91px;
    top: 66px;
}
.div2 {
    left: 132px;
    top: 152px;
}
.div3 {
    left: 171px;
    top: 90px;
}

also in here i want change the active div when div is clicked, it should bring to front when is clicked, how can do that with Jquery:

$(".div1").click(function() {
    // make div 1 front of the screen
})
$(".div2").click(function() {
    // make div 2 front of the screen
})
$(".div3").click(function() {
    // make div 3 front of the screen
})

Specify a z-index property for each of the three divs, say 1, in your CSS. Then upon your click, increase the z-index of the div that was clicked.

$('div[class^="div"]').click(function(){
    $(this).css('z-index', 2);
    //reset other sibling div's z-index to default value (i.e. 1)
    $(this).siblings('div').css('z-index', 1);
});

Note that here I'm assuming all of you three divs are in the same container div.