title: Having trouble positioning div layer on top of html slider
body: <p>I am trying to position an image on top of my slider using this:</p>
  
  <p>CSS:</p>
  
  <pre><code>#orbitDemo { background: url(../../images/orbit/spinner.gif) no-repeat center center 
  #3c3c3c; height: 300px;  }
  #orbitDemo.orbit { height: auto; }
  #orbitDemo img, #orbitDemo div { display: none; }
  #orbitDemo.orbit img, #orbitDemo.orbit div { display: block;}
  
  @media handheld, only screen and (max-width: 767px) {
  
  dl.nice.tabs.mobile { margin-bottom: 0px; }
  .nice.tabs.mobile dd a { padding: 12px 20px; }
  div.foundation-header h1 { font-size: 32px; font-size: 3.2rem; }
  }
  
  #container 
  {
  margin-left: auto;
  margin-right: auto;
  width: 950px;
  padding: 5px 15px 20px 15px;
  border: 1px solid;
  border-top: 1px solid #CCC;
  border-left: 1px solid #CCC;
  border-right: 1px solid #BBB;
  border-bottom: 1px solid #BBB;
  border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow:inset 0 0 2px #ccc;
  background: #fff;
  margin-bottom: 15px;
  }
  
  #image
  {
  position: absolute;
  display: none;
  z-index: 2000; // might need to be changed if you cant see it
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="sliderbg"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;           
              &lt;div id="orbitDemo"&gt;
  
          &lt;div&gt;
          &lt;a href="&lt;?php echo $link1; ?&gt;" &gt;
              &lt;img src="&lt;?php echo $slide1 ;?&gt;" alt="Slider" /&gt;
          &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
          &lt;a href="&lt;?php echo $link2; ?&gt;"&gt;
              &lt;img src="&lt;?php echo $slide2 ;?&gt;" alt="Slider" /&gt;
          &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
          &lt;a href="&lt;?php echo $link3; ?&gt;"&gt;
              &lt;img src="&lt;?php echo $slide3 ;?&gt;" alt="Slider" /&gt;
          &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id="image"&gt;
              &lt;img src="&lt;?php echo $slide0 ;?&gt;" (This is the image over the slider.)
          &lt;/div&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function ($) {
  $(window).load(function() {
  $('#orbitDemo').orbit({
       animation: 'horizontal-push',
       bullets: false,
   });
   });
   });
  </code></pre>
  
  <p></p>
  
  <p>This works great. I haven't had any problems with it except that it renders the image I want on top of everything as another side at the end. Am I going about this the wrong way? How can I get it to skip this image or rewrite it so that it doesn't look like another slide?</p>