jquery - jQuery Cycle を使用したポジショニングの問題

Question

jquery Cycle プラグインを使用してスライドショーを作成しました。各画像はページの幅 (リキッド レイアウト) にまたがり、キャプションが付随しています。画像の上にキャプションを配置する必要があるためposition: absolute、CSS で使用しています。ただし、私が読んだいくつかのブログ投稿とスタックの回答によると、Cycle は CSS の配置をオーバーライドし、キャプションは画像の下にプッシュされます。CSSで使用!importantしましたが、それも機能しません。

これが私のJqueryです：

$(document).ready(function(){
    $(".slideshow").cycle({
        fx: 'scrollRight',
        next: '#right-arrow',
        timeout: 0,})
    $(".slideshow").cycle({
        fx: 'scrollLeft',
        next: '#left-arrow',
        timeout: 0,})
    })  

そして私のHTML。画像とは別の DIV 要素にキャプションを含めたことに注意してください。それを同じ DIV に入れることは、キャプションをショーの別のスライドにすることでした。

<div class = "slideshow">
    {% for photo in gallery %}
        <img id = "gallery-image" src ="{{ photo.image.url }}"/>
    {% endfor %}    
</div>  

<div class = "slideshow">
    {% for photo in gallery %}
    <div id = "caption-container">{{ photo.caption }}</div> 
    {% endfor %}
</div>

そして最後に私のCSS：

#copy-container {
        position: absolute;
        top: 350px;
        width: 7%;
        right: 3%;
        z-index: 10;
        background-color: red;} 

Chrome Inspect Elements を使用して表示されるものは次のとおりです。

Computed Styles:
    display: block;
    height: 54px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 101px;

Styles:
    :active :hover
    :focus  :visited
    element.style {
    position: relative;
    width: 101px;
    height: 54px;
    overflow: hidden;
    }

Matched CSS Rules
    user agent stylesheetdiv {
    display: block;
    }
    Inherited from body
    body {
    font: arial;
    }

Chrome 開発ツールからの HTML...

<div class="slideshow" style="position: relative; width: 154px; height: 36px; overflow: hidden;">


        <div id="copy-container" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1; width: 154px; height: 36px;">
            <div id="client-container">client:American Express</div>

            <div id="caption-container">WOOOHOOOO</div>
        </div>  


        <div id="copy-container" style="position: absolute; top: 0px; left: 154px; display: none; z-index: 2; opacity: 1; width: 101px; height: 36px;">
            <div id="client-container">client:Selfridges</div>

            <div id="caption-container">nbew image</div>
        </div>  

</div>