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;
    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
})


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.

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


    CSS Howto..

    inline svg - how to apply browser default styles to xhtml in foreignObject?

    how to set background-image to pseudo element?

    how to find a css class which has another css class as sibling

    How to overlay a div upon other div while scrolling using css

    How do i hide html until its processed with javascript?

    How to do this angle background by CSS?

    How to change particular cells color using css in Ext.ux.touchcalendar in sencha touch

    How to neutralize CSS definitions without overriding

    How to draw heart using HTML/CSS table?

    How can I put an input element on the same line as its label?

    How to preserve sibling element position when one sibling is absolutely positioned?

    Greasemonkey: How to do something when style=“display: none;” changes?

    How to select element by order ? - Css

    how to hide an image on css active in IE

    how to do display none using css

    How to apply background-color: css only in a webkit browser

    How to open a CSS-only popup automatically on page load/using Javascript?

    CSS classes: base+additional. How to define?

    How to keep Fixed position navigation static positioned when resizing window

    How to use 3-digit color codes rather than 6-digit color codes in CSS?

    How can I split this image into pieces so when I write a long text, it doesn't go outside of the div?

    How to add Print headers and footers in HTML, CSS and JavaScript?

    Css How to add round corners when hover li element?

    Jquery - How to set mouseleave event to an after() generating div?

    How can I insert dynamic text into a div with absolute position?

    How to apply the grayscale jquery plugin to a background image?

    How can I make an arrow on an instruction box on the right move to point to the field on the left that is in focus?

    How do you modify the modal height without removing the slide effect in Bootstrap Twitter?

    How to get CSS background property to work with toggleClass() in jQuery?

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]