how can bring to front clicked div in jquery?

Tags: jquery,html,css,bringtofront

Problem :

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;
.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

Solution :

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

    $(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.

    CSS Howto..

    How do I format an angular drop down menu?

    selenium - how to click on a link based on its text using css instead of xpath and without using the contains operator?

    How to add css files to a custom module in Odoo 8?

    How to align vertical elements as horizontal elements and shift to right side of the screen using CSS?

    How to change the color of first row of first table using css

    Why don’t my box borders surround the floats inside them without this CSS fix? (And how does the fix work?)

    How to highlight the menu item in menu

    How may I stack multiple html/css buttons vertically along the center of the page?

    How do I get IE to display CSS DIV tables properly?

    css how to make the button in the middle of this code [closed]

    How to implement a version of css?

    How to create a level 4 submenu with this css?

    How do I trace my inner pages via google analytics?

    How to set a tooltip width dynamically?

    CSS - How to align divs horizontally?

    How do you set JavaFX TabPane CSS in code?

    How to show hidden div in the same line as the paragraph text?

    How to set keyboard focus to a representing parent element of a list

    How can I add vertical space to a horizontal list?

    CSS classes: base+additional. How to define?

    How to apply multiple CSS selectors to a paticular div?

    How to make box container expand when text-field does?

    How to make a layout in which certain tags will fill remaining space of parent tag/container?

    How do I set background-image height using jQuery?

    How to stop word-wrapping in a CSS Dropdown menu.

    How do I put a clear button inside my HTML text input box like the iPhone does?

    How to create a button to every list item which opens a menu over it?

    How to make a pure CSS div with a gradient background?

    How to create an image hover fade effect with jQuery and CSS?

    How to I have a within a
  • align to the right side of the