title: Positioning issue using jQuery Cycle
body: <p>I've built a slideshow using the jquery Cycle plugin, each image spans the width of the page (liquid layout) and has an accompanying caption. I need the caption to sit over the image and hence I'm using <code>position: absolute</code> in my CSS. However, as per some blog posts and Stack answers I've read, Cycle overides CSS positioning, and the caption is pushed below the image. I've used <code>!important</code> in my CSS but that doesn't work either. </p>
  
  <p>Here is my Jquery:</p>
  
  <pre><code>$(document).ready(function(){
      $(".slideshow").cycle({
          fx: 'scrollRight',
          next: '#right-arrow',
          timeout: 0,})
      $(".slideshow").cycle({
          fx: 'scrollLeft',
          next: '#left-arrow',
          timeout: 0,})
      })  
  </code></pre>
  
  <p>and my HTML. Note that I've included the caption in a separate DIV element than the image. Putting it in the same DIV was making the caption a separate slide in the show. </p>
  
  <pre><code>&lt;div class = "slideshow"&gt;
      {% for photo in gallery %}
          &lt;img id = "gallery-image" src ="{{ photo.image.url }}"/&gt;
      {% endfor %}    
  &lt;/div&gt;  
  
  &lt;div class = "slideshow"&gt;
      {% for photo in gallery %}
      &lt;div id = "caption-container"&gt;{{ photo.caption }}&lt;/div&gt; 
      {% endfor %}
  &lt;/div&gt;
  </code></pre>
  
  <p>and finally my CSS:</p>
  
  <pre><code>#copy-container {
          position: absolute;
          top: 350px;
          width: 7%;
          right: 3%;
          z-index: 10;
          background-color: red;} 
  </code></pre>
  
  <p>Here is what is showing up using Chrome Inspect Elements:</p>
  
  <pre><code>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;
      }
  </code></pre>
  
  <p>HTML from Chrome Dev tools...</p>
  
  <pre><code>&lt;div class="slideshow" style="position: relative; width: 154px; height: 36px; overflow: hidden;"&gt;
  
  
          &lt;div id="copy-container" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1; width: 154px; height: 36px;"&gt;
              &lt;div id="client-container"&gt;client:American Express&lt;/div&gt;
  
              &lt;div id="caption-container"&gt;WOOOHOOOO&lt;/div&gt;
          &lt;/div&gt;  
  
  
          &lt;div id="copy-container" style="position: absolute; top: 0px; left: 154px; display: none; z-index: 2; opacity: 1; width: 101px; height: 36px;"&gt;
              &lt;div id="client-container"&gt;client:Selfridges&lt;/div&gt;
  
              &lt;div id="caption-container"&gt;nbew image&lt;/div&gt;
          &lt;/div&gt;  
  
  &lt;/div&gt;      
  </code></pre>