Question

我点击后会尝试放大div。我面临的问题是，即使我用jquery更新z-index并且它得到更新，它对div没有任何影响，其他div仍然保持在最顶层，这里是一个例子：{{ 3}}

如果您点击任何日期，该框会放大并展开，但其他div仍然保持在最顶层，即使他们的z-index为1且活动div的z-index为10.谢谢

Answer 1

我做了以下实验：

<div id="blue" class="day-wrap" data-date="2015-03-22">
  <div class="day-class-outside">
    <div class="day-class"></div>
  </div>
</div>

<!-- </div> -->

<div id="red" class="day-wrap" data-date="2015-03-22">
  <div class="day-class-outside">
    <div class="day-class"></div>
  </div>
</div>

和

#red, #red div, #red div div {
    background-color: green;
}

#blue, #blue div, #blue div div {
    background-color: blue;
}

它工作得非常好。一切都很完美，当然，你忘了制作.day-wrap: relative。

换句话说，原始代码没有问题。

Answer 2

您需要设置相对于z-index工作的位置

.day-wrap
{
    -webkit-transform: translate3d(0,0,0);
    margin: 3px;
    position: relative;
    float:                          left;
    width:                          65px;
    height:                         50px;
    z-index:1;

    transform: perspective(100px);
    transform-style: preserve-3d;

}

fiddle

使用透视时忽略Z-index值

2 个答案: