title: over-flow:hidden makes my content hiding behind ans z-index is not working
body: <p>Here in the above html content, <code>class="scroll"</code> will have style <code>overflow-x: hidden</code> and because of that my <code>class="tool-tip"</code> content is hiding behind the div. Even I tried to make <code>class="tool-tip"</code> z-index more, but it is not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.scroll {
    position: fixed;
    left: 216px;
    top: 178px;
    overflow-y: auto;
    overflow-x: hidden;
    bottom: 0%;
    z-index: 999;
  }
  .tool-tip {
    position: absolute;
    z-index: 10;
    padding: 4px 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div clas="scroll"&gt; 
    &lt;span class="tooltip-text right"&gt;
      &lt;span class="text"&gt;
        5978486 GGGG 1234 rrrr 1257 vvvv bbbb tttt 12
      &lt;/span&gt;
      &lt;span class="tool-tip"&gt;
        5978486 GGGG 1234 rrrr 1257 vvvv bbbb tttt 12
      &lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>