3

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.

2
  • you need change z-index on hover Sep 29, 2014 at 12:06
  • you couuld add z-index:-1 to the second .container in your case like this > jsfiddle.net/Lxsf9ako/6 || but as I see, your example is not your actual scenario so it's hard to tell.. try it.
    – webkit
    Sep 29, 2014 at 12:43

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

5
  • Hi, Please see comment: stackoverflow.com/questions/26099421/… Sep 29, 2014 at 12:28
  • Well if you are using a framework (angular) this should work ootb. Something in your code seems to interfere here.
    – Mx.
    Sep 29, 2014 at 12:36
  • The issue is a combination of the animate.css (daneden.github.io/animate.css) animations, in combination with the angular-ui-bootstrap datepicker directive. It is an issue with the -webkit-animation-fill-mode css property in Chrome, IE11 renders this correctly. Sep 29, 2014 at 12:39
  • true. Well may this workaround helps you. But here the message is just hidden by opacity. You could add some JS to get better results.
    – Mx.
    Sep 29, 2014 at 12:59
  • This removes the animation on the .container elements and places it on the .over element. I might try to find a fix using the opacity property to try and get the element back in the stacking order though, will keep you posted. Sep 29, 2014 at 13:28
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/

3
  • Hey, That does work indeed, but I can't do this in this specific case, the containers are a generic class used throughout the application, over which I have no control. The issue needs to be fixed on the overlay itself. Sep 29, 2014 at 12:10
  • so you can't create tyour own css? @GerritBertier
    – DaniP
    Sep 29, 2014 at 12:25
  • I can, but the hover is actually just a demo case. In fact, the 'overlay' is the popup from an angular-ui-bootstrap datepicker directive, and the container is a generic class. The popup should show upon clicking the datepicker button, and I don't want to add extra javascript unless really necessary. Sep 29, 2014 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.