Maximage plugin Position:absolute
===

I'm using the Maximage jquery plugin to create a fullscreen slideshow. The plugin allows you to include HTML elements which are layered over the top of the background image. I would like to use HTML to provide a caption for each image and have the caption layered on top of my site footer (separate from Maximage). I have tried various positioning but cannot find a way to do this, the caption is always behind the footer due to the order of the elements. Does anyone have any idea how I might do this? My code is as follows after is has been rendered by the maximage plugin -

    <div role="main">
    <img id="cycle-loader" src="img/ajax-loader.gif" style="display: none;">
    <div id="maximage" class="mc-cycle" style="width: 1282px; height: 294px; overflow: hidden; display: block;">
       <div class="mc-image " data-href="" style="background-image: url("img/showcase/1-redmire.jpg"); position: absolute; top: 0px; left: 0px; display: block; z-index: 8; opacity: 1; width: 1282px; height: 294px;" title="">
          <div class="slide-caption">
             <p>Bespoke house in Mercaston, Derbyshire. Image produced for client issue.</p>
          </div>
       </div>
    </div>
    </div>
    <footer>
       <a id="arrow_left" href=""></a>
       <a id="arrow_right" href=""></a>
       <div id="controls"></div>
    </footer>

And the CSS -

    footer 
    { 
       bottom: 0px; 
       position: fixed; 
       width: 100%; 
       background: url(../img/bg-black.png) repeat; 
       color: #FFF; 
       height: 55px; 
       line-height: 55px; 
       border-bottom: 1px solid #333;  
    }
    .slide-caption 
    { 
       position: fixed; 
       z-index: 998; 
       bottom: 20px; 
       left: 20px; 
       color: #ffffff; 
       background: #000000; 
       padding: 5px;
    }