CSS3 transitions and z-index
I am working on my project but I am having problems with z-index in css. I've googled all day but haven't found a solution that works for me. The problem is I am getting a div under another div. It must be something with a z-index. Hopefully someone can find out what I am 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 also put everything together in a jsFiddle
source to share
These are the parent elements (.container) that cause your grief. Due to their html order and the fact that they are static, the minor children of the .container will always come before the first .container's.
If it is an html structure that you should be using, add "position: relative" to the default css of .container and adjust your z-index separately for 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';
});
});
In addition, the ID should not be used for multiple items. This is not valid and it also limits your ability to make more efficient selection of elements with javascript.
There is also the option to fire multiple events at the same time when you insert an event listener inside the listener function, but I don't know if jQuery will take care of this for you or not. I was always better off declaring them separately and using the flag to see if it got fired before another.
source to share