title: How to select options overlapping an absolute positioned DIV?
body: <p>I have an absolute positioned div which works like a tooltip. On mouse over of an element it shows and then hides at mouse out. I have few <code>&lt;select&gt;</code> elements in the page which is placed above the tooltip element. In normal case the tooltip div will appear over the select tag. But when a user clicks on select tag and the options are shown, it overlaps the tooltip. Giving a higher z-index for select or options tag did not work.</p>
  
  <p><img src="https://i.stack.imgur.com/jLc81.png" alt="enter image description here"></p>
  
  <p>Here is a sample code to illustrate the problem.</p>
  
  <pre><code>&lt;body&gt;
  &lt;h1&gt;Select Options Overlapping Absolute Positioned DIV&lt;/h1&gt;
  
  &lt;select name="some-name"&gt;
      &lt;option&gt;United States&lt;/option&gt;
      &lt;option&gt;Canada&lt;/option&gt;
      &lt;option&gt;Mexico&lt;/option&gt;
      &lt;option&gt;Japan&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="top-layer"&gt;
     &lt;h2&gt;Overlapping Div&lt;/h2&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>select, options{ z-index:10;}
  
  #top-layer { 
     background:#ccc; 
     color:#000; 
     border:solid 1px #666; 
     position:absolute; 
     top:45px; 
     left:70px; 
     z-index:100;
  }
  </code></pre>