title: Placing a div over a jQuery image slider
body: <p>I'm trying to place a div element over the a <a href="http://flowplayer.org/tools/scrollable/index.html" rel="nofollow">jQuery Tools Scrollable</a> image gallery. I've got everything placed in the right way, however the div doesn't appear on top of the jQuery object even if I set z-index: 2. Here's my code:</p>
  
  <pre><code>div#wrapperContainer{
  display: table;
  overflow: hidden;
  margin: -5px auto;
  }
  
  //this is the div i'm trying to put on top of the jQuery Tool
  div#wrapper {
  display: table-cell;
  vertical-align: middle;
  z-index: 2;
  width: 1024px;
  height: 192px;
  background-color: #525252;
  -moz-box-shadow: 0px -10px 50px #000; 
  -webkit-box-shadow: 0px -10px 50px #000; 
          box-shadow: 0px -10px 50px #000;
  }
  
  //this is the CSS for the jQuery Tool
  
  .scrollable {
  position: relative;
  overflow: hidden;
  width: 940px;
  height: 528px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
          border-radius: 10px;
  }
  
  .items {
  width: 20000em;
  clear: both;
  position: absolute;
  }
  
  .items  div{
  float: left;
  width: 940px;
  height: 528px;
  }
  </code></pre>