CSS动画填充模式和z-index问题

Question

我在我正在处理的项目中使用CSS动画（来自animate.css）。 我发现的是，当一个容器中有一个绝对定位且z索引的孩子在其中消失时，孩子的z-index不能正常工作。

我在这个小提琴中重新创造了这个问题： http://jsfiddle.net/Lxsf9ako/

问题似乎是由

引起的

animation-fill-mode: both;

此样式由animate.css放置在容器上，因此我无法控制它。我可以使用animation-fill-mode: none覆盖它，但我宁愿不为每个动画都这样做。

关于这个的任何想法？

更新 我刚刚发现这是与webkit相关的，IE11正确地呈现了它。

更新2： 我无法在悬停时编辑.container课程。

更新3： 小提琴中的“悬停”只是一个演示。实际上，.over对象是angular-ui-bootstrap datepicker指令的弹出窗口，.container元素是整个应用程序中使用的泛型元素。给他们一个额外的id / class来识别它们作为datepicker容器对我来说不是一个干净的解决方案。

Answer 1

您可以在z-index更改容器的hover。试试这个：

.container:hover {
    z-index:100;
}

选中此http://jsfiddle.net/Lxsf9ako/2/

Answer 2

添加

#hoverme{
   z-index: 1;
}

<强> DEMO

为什么你必须这样做

  

没有任何z-index值，元素按照它们的顺序堆叠   出现在DOM中（同一层次结构中最低的一个）   出现在上面）。具有非静态定位的元素将始终   出现在具有默认静态定位的元素之上。

     

另请注意，嵌套起着重要作用。如果元素B位于顶部   对于元素A，元素A的子元素永远不能高于   要素B。

From css-tricks.com

＆＃13;

＆＃13;

#hoverme {
  z-index: 1;
}
.container {
  background: rgb(255, 255, 255);
  /* Old browsers */
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#efefef));
  background: -webkit-linear-gradient(#fff 0%, #efefef 100%);
  background: -moz-linear-gradient(#fff 0%, #efefef 100%);
  background: -o-linear-gradient(#fff 0%, #efefef 100%);
  background: linear-gradient(#fff 0%, #efefef 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef', GradientType=0);
  /* IE6-9 */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: block;
  width: 100%;
  border: 1px solid #c7c7c7;
  margin-bottom: 10px;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  -webkit-animation-name: fadeIn;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation-name: fadeIn;
  /* Firefox < 16 */
  -ms-animation-name: fadeIn;
  /* Internet Explorer */
  -o-animation-name: fadeIn;
  /* Opera < 12.1 */
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
#hoverme .over {
  display: none;
  padding: 20px;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  background: #efefef;
  z-index: 10;
  box-sizing: border-box;
  -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
}
#hoverme:hover .over {
  display: block;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Firefox < 16 */

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Internet Explorer */

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Opera < 12.1 */

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

＆＃13;

<div id="hoverme" class="container">
  <div class="over">I should be over the next container</div>
</div>
<div class="container">I should be under the .over</div>

＆＃13;

＆＃13;

＆＃13;

更新

您还可以使用.over和opacity在visibility上使用转化。

#hoverme .over {
    opacity: 0; 
    visibility:hidden;
    transition:visibility 0.4s, opacity 0.4s; 
    ...
}

#hoverme:hover .over {
    visibility:visible;
    opacity:1;
}

<强> DEMO

＆＃13;

＆＃13;

.container {
  background: rgb(255, 255, 255);
  /* Old browsers */
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#efefef));
  background: -webkit-linear-gradient(#fff 0%, #efefef 100%);
  background: -moz-linear-gradient(#fff 0%, #efefef 100%);
  background: -o-linear-gradient(#fff 0%, #efefef 100%);
  background: linear-gradient(#fff 0%, #efefef 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef', GradientType=0);
  /* IE6-9 */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: block;
  width: 100%;
  border: 1px solid #c7c7c7;
  margin-bottom: 10px;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}
#hoverme .over {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.4s, opacity 0.4s;
  padding: 20px;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  background: #efefef;
  z-index: 10;
  box-sizing: border-box;
  -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
}
#hoverme:hover .over {
  visibility: visible;
  opacity: 1;
}

＆＃13;

<div id="hoverme" class="container">
  <div class="over">I should be over the next container</div>
</div>
<div class="container">I should be under the .over</div>

＆＃13;

＆＃13;

＆＃13;