Question

我正在处理我的项目，但我在css中遇到了z-index问题。我整天用谷歌搜索，但没有找到解决方案，巫婆为我工作。问题是，我在另一个div下得到div。它必须是z-index的东西。希望有人能找出我做错了什么......

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

我还在jsFiddle

中全力以赴

Answer 1

这是导致你悲痛的父元素（.container）。由于它们的html顺序以及它们是静态定位的事实，第二个.container的子元素将始终位于第一个.container的前面。

如果这是您必须使用的html结构，请将“position：relative”添加到.container默认css，并在事件上单独调整其z-index。

#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/

此外，不应在多个元素上使用id。它无效，也限制了您使用javascript进行更有效的元素选择的能力。

当您在侦听器的函数中嵌套事件侦听器时，还有可能同时触发多个事件，但我不知道jQuery是否会为您处理此问题。我总是发现最好单独声明它们并使用一个标志来查看是否在另一个之前触发了它们。

CSS3过渡和z-index

1 个答案: