CSS 过渡和 z-index 冲突答案

【问题标题】：CSS transition and z-index conflictCSS 过渡和 z-index 冲突
【发布时间】：2014-09-14 22:31:26
【问题描述】：

对于一个新的网页设计，我尝试使用 CSS 过渡和 z-index 控制两个 50% 宽度的图层，但似乎存在冲突：z-index 似乎太慢了。正如您在小提琴中看到的那样，悬停时，白色框隐藏在右侧滑块 div 后面，直到过渡完成。有没有更快的替代方案？还是有其他方法可以做到这一点？任何帮助将不胜感激！

这是我的 CSS：

body {
    background:black;
}
div {
    -webkit-transition:opacity 0.6s ease, width 0.6s ease;
    transition:opacity 0.6s ease, width 0.6s ease;
}
.slide {
    position:absolute;
    top:0;
    bottom:0;
    width:50%;
    -webkit-transform:skew(-15deg);
    -moz-transform:skew(-15deg);
    -ms-transform:skew(-15deg);
    -o-transform:skew(-15deg);
    transform:skew(-15deg);
    z-index:2;
}
.slide:hover {
    width:60%;
    z-index:3;
}
.slide#left {
    left:0;
}
.slide#right {
    right:0;
}
.wrap {
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
}
.inner {
    width:100%;
    height:100%;
    -webkit-transform:skew(15deg) scale(1.5);
    transform:skew(15deg) scale(1.5);
    opacity:0.5;
    position:absolute;
}
.inner:hover {
    opacity:1;
}
.inner#left {
    background:url(//savado.nl/new/key.jpg) no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
.inner#right {
    background:url(//savado.nl/new/code2.jpg) no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
.slide .logo {
    position:absolute;
    z-index:99;
    top:50%;
    height:20%;
    padding-left:20%;
    background:white;
}
.logo#left {
    right:0;
    -webkit-transform:translateX(50%) translateY(-50%) skew(15deg);
    -moz-transform:translateX(50%) translateY(-50%) skew(15deg);
    -ms-transform:translateX(50%) translateY(-50%) skew(15deg);
    -o-transform:translateX(50%) translateY(-50%) skew(15deg);
    transform:translateX(50%) translateY(-50%) skew(15deg);
}
.logo#right {
    left:0;
    -webkit-transform:translateX(-50%) translateY(-50%) skew(15deg);
    -moz-transform:translateX(-50%) translateY(-50%) skew(15deg);
    -ms-transform:translateX(-50%) translateY(-50%) skew(15deg);
    -o-transform:translateX(-50%) translateY(-50%) skew(15deg);
    transform:translateX(-50%) translateY(-50%) skew(15deg);
}

这是fiddle！

PS：我是在这个论坛上发布我自己的问题的新手，所以如果我违反了任何规则，我很抱歉。除此之外，我的英语不是最好的，因为它不是我的母语（我是荷兰人）。但是请帮帮我！

【问题讨论】：

“slow z-index”是什么意思？
如果你检查fiddle，你可以看到z-index太慢了，因为右边滑动部分顶部的白色盒子在悬停时隐藏在盒子后面。
那是因为你设置的宽度是 0.6 秒，如果你想要更快的话，把它改成 0.3 秒
我想我知道他的意思。出于某种原因，即使它的 z-index 为 99，而幻灯片在悬停时有 2 或 3，徽标仍然在 z 轴上，直到悬停动画完成，这只发生在右侧幻灯片上，效果很好左边那个。
@Deathmras：不幸的是，这并没有解决我的问题......

标签： css z-index css-transitions transitions

【解决方案1】：

看起来问题仅出现在 Chrome 中，但不在 FF 中。你需要做的是像这样在包装容器上设置一个较小的 z-index

.wrap {
  z-index:1;
}

这应该可以解决问题，这是更新后的JSFIDDLE

【讨论】：

就是这样！非常感谢！ :)
我建议写一个新问题:)
向过渡添加 z-index 有效，但这没有。
好吧，这似乎也对我有用，尽管@Kazim Hussain 的答案可能也有效。现在的问题是为什么要这样做？是否有更多关于此的记录问题？

【解决方案2】：

在过渡声明中添加 z-index。这应该会阻止 z-index 在转换之前执行

-webkit-transition:opacity 0.6s ease, width 0.6s ease,z-index 0.6s;
transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s;

【讨论】：