在 css3 过渡期间不遵守 z-index答案

【问题标题】：z-index is not respected during a css3 transitions在 css3 过渡期间不遵守 z-index
【发布时间】：2013-08-29 16:34:41
【问题描述】：

我用 CSS3 和 jQuery 制作了一个画廊（在这里：http://dev.crosscode.no/artgallery/）但我有一个问题：

当第一张右照片替换主照片时（在过渡期间），第二张右照片会查看第一张右照片，但第一张右照片的 zIndex 为 650，第二张右照片的 zIndex 为 600。有人吗？知道为什么会这样吗？

我使用all 0.75s cubic-bezier(0.42, 0, 0.58, 1) 0s 作为过渡。

提前致谢。

【问题讨论】：

对我来说很合适（Chrome 22、Win7）。顺便说一句，画廊不错。

标签： jquery z-index css-transitions css-animations

【解决方案1】：

目前正在尝试解决类似问题，而不是画廊，而是图层 -> z-index 在所有 4 个浏览器（ff、ie、chr、saf）中都工作错误。你的div的顺序是什么？我的是：

<div #container>
  <div .layer>
     <div .wrap2>
        <div .wrap1>
           <img #1>
           <span .gizmo1>
           <span .gizmo2>

  <div .layer>
     <div .wrap2>
        <div .wrap1>
           <img #2>
           <span .gizmo1>
           <span .gizmo2>

问题： 1) 当 IMG#2 具有更高的 z-index 时，IMG#1 仍然显示在顶部 (如果将 img#1 z-index 设置为 200/2000 则事件 - 两者都不被尊重）

使用的 CSS 效果：“transform: rotate(60deg)”在每一层的 .wrap1 上 -- 没有别的

（使用，jQuery.1.10.2，jQuery UI.1.10.3）

似乎真的很奇怪，我错过了什么？

-- 编辑：Z-index 问题仅在我将转换属性添加到某些 .wrap div 后才出现！这意味着：当应用程序启动时，没有 transform: 存在.. 那么 z-indexes 工作正常！

【讨论】：