CSS3 transitions and z-index

Question

I'm working on my project but I have got problems with z-index in css. I have googled all day but haven't found solution witch works out for me. Problem is, that i getting div under another div. It must be something with z-index. Hopefully someone can find out what i'm doing wrong...

$(".box").click(function() {
  $(this).css({
    "-webkit-transform-style": "preserve-3d",
    "background-color": "red",
    "box-shadow": "0px 0px 10px red",
    "-webkit-transition:": "all .2s ease-in",
    "zoom": "1",
    "z-index": "10",
    "-webkit-transform": "rotateY(0deg)"
  });

  $(this).mouseleave(function() {
    $(this).css({
      "-webkit-transform-style": "preserve-3d",
      "background-color": "blue",
      "box-shadow": "",
      "-webkit-transition:": "all .2s ease-out",
      "zoom": "",
      "z-index": "1",
      "-webkit-transform": "rotateY(45deg)"
    });
  });
});

#blue {
  -webkit-perspective: 600px;
}
#blue .box {
  position: absolute;
  zoom: 0.7;
  background-color: blue;
  -webkit-transform: rotateY(45deg);
  -webkit-transition: all .2s ease-out;
  z-index: 0;
  height: 100px;
  width: 200px;
  margin-left: 50px;
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blue" class="container" style="margin-left: 50px">
  <div class="box" id="first"></div>
</div>
<div id="blue" class="container" style="margin-left: 200px">
  <div class="box" id="second"></div>
</div>

I have also putted all together in jsFiddle

Answer 1

It's the parent elements (.container) that are causing your grief. Because of their html order and the fact that they're static positioned, the second .container's child elements will always be in front of the first .container's.

If this is the html structure you must use, add "position: relative" to the .container default css and adjust their z-index individually on your events.

#blue {
    position:relative;
}

$(".box").click(function () {
    $(this).css({"-webkit-transform-style":"preserve-3d",
                 "background-color":"red",
                 "box-shadow":"0px 0px 10px red",
                 "-webkit-transition":"all .2s ease-in",
                 "zoom":"1",
                 "z-index":"10",
                 "-webkit-transform":"rotateY(0deg)"});

    this.parentNode.style.zIndex = '1';

        $(this).mouseleave(function() {
        $(this).css({"-webkit-transform-style":"preserve-3d",
                     "background-color":"blue",
                     "box-shadow":"",
                     "-webkit-transition:":"all .2s ease-out",
                     "zoom":"",
                     "z-index":"1",
                     "-webkit-transform":"rotateY(45deg)"});

         this.parentNode.style.zIndex = '0';

       });
    });

http://jsfiddle.net/aPKh6/10/

Also, id's shouldn't be used on multiple elements. It's invalid and it also limits your ability to do more efficient element selection with javascript.

There is also the potential of firing multiple events at once when you nest an event listener inside of a listener's function, but I don't know if jQuery takes care of this for you or not. I've always found it better to declare them separately and use a flag to see if one was fired before the other.