How to make animation in css3 be on top of other image?

Question

Hi guys I am trying to make a small css3 animation...the issue is it's not going over the top of what I want it to go over...It goes under...I tried applying a z-index but it has yet to work...was thinking maybe animations are handled differently?

If anyone has any idea on how I can move it on top please let me know

#header{
   background: url(/images/clouds.png) repeat-x center 48px;
   -webkit-animation-name:cloud-crawl-header;
   -webkit-animation-duration:  180s;
   -webkit-animation-timing-function:linear;
   -webkit-animation-iteration-count:infinite;
   -moz-animation-name:cloud-crawl-header;
   -moz-animation-duration:180s;
   -moz-animation-timing-function:linear;
   -moz-animation-iteration-count:infinite;
   z-index: 5;
}
@-webkit-keyframes cloud-crawl-header{
    from{ background-position: -100% 48px, center top}to{background-position: 100% 48px, center top}
    }

I just want it to go above a basic image I am using...

which is being added like so

<div class="logo">
   <a href="website.com/bla">
      <img src="images/logo.jpg" alt="logotop" title="title!" />
   </a>
</div>

.logo {
   margin: auto auto;
   text-align: center;
   z-index: -1;
}

Answer 1

The position of the element is currently static - you need to change it to relative, absolute, or fixed in order to apply a z-index. in your case, I think that applying relative positioning would be best. Reasoning: it wont change the x,y (left,top) position of your element.