title: div in front of everything with z-index
body: <p>I have this carousel of products in a page I'm building.</p>
  <p><a href="http://flytango.com.ar/test/home-publico.html" rel="nofollow noreferrer">http://flytango.com.ar/test/home-publico.html</a></p>
  <p>When hovering the product, I'd like to show a div with some text.</p>
  <p>I'm achieving this by using</p>
  <pre><code>.item_carrousel_home:hover + .item_carrousel_home_on {
      display: block;
  }
  </code></pre>
  <p>The div shows up (in green) but I want it to be offset 40px up. So when i try &quot;margin-top:-40px; it gets cut off by the carousel DIV.</p>
  <p>I've tried with z-index, but I can't bring the div in front of everything.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.item_carrousel_home:hover + .item_carrousel_home_on {
      display: block;
  .item_carrousel_home_on {
      width:220px;
      height:130px;
      background-color:#00FF00;
      color:#FFFFFF;
      display:none;
      position:absolute !important;
      z-index:999999 !important;
      margin:0px;
      margin-left:20px;
      margin-top:-40px !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="carrousel_home"&gt;
    &lt;ul id="mycarousel" class="jcarousel-skin-tango"&gt;
      &lt;li&gt;
          &lt;a href="#" class="item_carrousel_home"&gt;&lt;img src="imagenes/cellactive.jpg"      alt="Cellactive" width="155" height="200" border="0" /&gt;
          &lt;br /&gt;Nombre Producto
          &lt;br /&gt;en dos lineas&lt;/a&gt;
          &lt;div class="item_carrousel_home_on"&gt;HOLA&lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;&lt;!--fin del carrousel--&gt;</code></pre>
  </div>
  </div>
  </p>