css3 animation

I have a "display:none;" DIV containing the word "Download" and a down-arrow. When a user clicks on a link to start the download, the DIV is then moved to that click location and displayed. At that point I apply a "classList" animation which references @keyframes. The color changes specified within the keyframes work. But, I tried to use "position:fixed; left:10px; bottom:30px;" and all that seems to be ignored.

I did read somewhere that positioning was not possible with keyframes. I hope that was from someone that has a wrong answer.

what I want is to have an image arrow animate down infinitely, this is working, but I do not want to have it bounce back, I found css3 code, but the bounce back is the issue:

    @-moz-keyframes slide{
      0% {-moz-transform: translateY(-10px;);}
      90% {-moz-transform: translateY(5px);}
      100% {-moz-transform: translateY(-10px);}
   }
 
   .slideshow img
    {
 
        animation: slide 5s infinite;
    }
[code]

I'm using CSS3 code that I found to display animated clouds on a blue sky. Works just fine.

I also want to display a headline on top of the "sky and clouds". This isn't working correctly. The clouds are on top of the headline.

I tried z-index but that didn't work and read that z-index might not work when web-transform is being used. But I couldn't find a solution.

So, what do I need to do to make sure that the headline is always on top of the "sky and clouds".

Thanks.

HTML

<div id="clouds">
<h2>Welcome To Gateway</h2>
	<div class="cloud x1"></div>