使用透视图时忽略 Z 索引值

Question

我正在尝试在 div 单击后放大它。我面临的问题是，即使我用 jquery 更新了 z-index 并且它得到更新，它对 div 没有影响，其他 divs 仍然保持在顶部，这里有一个例子：http://coldtask.com/

如果您单击任何日期，该框会放大并展开，但其他 div 仍位于顶部，即使它们的 z-index 为 1 并且活动的 div z-index 是 10。谢谢

Answer 1

您需要为 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

Answer 2

我做了以下实验：

<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.

也就是说，你原来的代码没有问题。

使用透视图时忽略 Z 索引值

Z-index value ignored when using perspective

jquery

css

z-index