css z-index problem

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

<!---This code does not work as i would like it to. I seem unable to be able to make the 'filmstrip.gif' float on top of the photo's by ajusting the z-index values--->

<!---Daz filmstrip css--->

<style>

body{
background:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}

.filmspace{
position: relative;
z-index: 1;
width: 1090px;
height: 260px;
margin: 0px auto;
border: #639 1px solid;
overflow: hidden;
}

.filmspace .film_strip{
/* photo's - 263px wide 180px height*/
background: url(images/dazvectorfilmstrip2.gif);
position: relative;
z-index: 2;
background-repeat: repeat-x;
width: 2180px;
height: 260px;


-webkit-animation: filmstrip_roll linear 12s infinite;
-moz-animation: filmstrip_roll linear 12s infinite;
-ms-animation: filmstrip_roll linear 12s infinite;
-o-animation: filmstrip_roll linear 12s infinite;
animation: filmstrip_roll linear 12s infinite;
}

@-webkit-keyframes filmstrip_roll { from { right: 0px; } to { right: 792px; } }
@-moz-keyframes filmstrip_roll { from { right: 0px; } to { right: 792px; } }
@-ms-keyframes filmstrip_roll { from { right: 0px; } to { right: 792px; } }
@-o-keyframes filmstrip_roll { from { right: 0px; } to { right: 792px; } }
@keyframes filmstrip_roll { from { right: 0px; } to { right: 792px; } }

.photosinstylesheet{
    position: relative;
    z-index: 3;
    opacity: .99;
    float: left;
    padding-top: 42px;
    padding-left: 6px;
}
</style>

<!---Daz filmstrip css end--->

</head>

<body>

<!--daz filmstrip html5-->
  <div class="filmspace">
      <div class="film_strip">

        <img class="photosinstylesheet" src="images/filmstripphotos/fairswings.gif">
        <img class="photosinstylesheet" src="images/filmstripphotos/books.gif" alt="">
        <img class="photosinstylesheet" src="images/filmstripphotos/rainbow.gif" alt="">
        <img class="photosinstylesheet" src="images/filmstripphotos/babyface.gif" alt="">
        <img class="photosinstylesheet" src="images/filmstripphotos/buddha.gif" alt="">

       </div>
  </div>


</body>
</html>