CSS animation-fill-mode and z-index issue

问题

I'm using CSS animations (from animate.css) in a project I'm working on. What I found out is that when fading in a container with an absolutely positioned and z-indexed child in it, the z-index of the child isn't working as it should.

I recreated the issue in this fiddle: http://jsfiddle.net/Lxsf9ako/

The issue seems to be caused by

animation-fill-mode: both;

This style is placed on the container by animate.css, thus I have no control over this. I could overwrite it by using animation-fill-mode: none, but I rather don't do this for every animation.

Any ideas on this one?

Update: I just found out this is webkit related, IE11 renders this correctly.

Update 2: I can't edit the .container class on hover.

Update 3: The 'hover' in the Fiddle is just a demo. In fact, the .over object is the popup from the angular-ui-bootstrap datepicker directive, and the .container elements are generic elements used throughout the application. Giving them an extra id/class to identify them as datepicker containers is not a clean solution for me.

回答1:

You could change the z-index of the container on hover. Try this:

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

Check this http://jsfiddle.net/Lxsf9ako/2/

回答2:

Just add

#hoverme{
   z-index: 1;
}

DEMO

Why you have to do this

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning.

Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.

From css-tricks.com

#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;
  }
}

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

Update

You could also use a transition on the .over with opacity and visibility.

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

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

DEMO

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

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

来源：https://stackoverflow.com/questions/26099421/css-animation-fill-mode-and-z-index-issue