title: Chrome Css bug with Z-index
body: <p>I've come across a strange "bug" on Chrome where the z-index is not showing properly like in every other browser (including IE). </p>
  
  <p>I've read all related questions related to it and almost everyone in their questions were missing position or overflow.</p>
  
  <p>The link for the website is <strong><a href="http://slobodenpazar.mk/?s=&amp;post_location=All&amp;category_name=All" rel="nofollow">THIS</a></strong> and there is a dropdown ul element in the middle search that when you click it, is behind the pictures. I've tried for hours all possible combinations with child-parent, different z-indexes, positions and nothing seem to get the dropdown in front of the pictures.</p>
  
  <p>I would really appreciate it if someone could point me in the right direction or provide a sample to help me out.</p>
  
  <p>Thanks! </p>
  
  <p><strong>Solution from answers:</strong> The div element which had the problem, has around 10 div elements above it as "parents". His z-index could not get in the front because his highest parent did not have position:relative, only had z-index which caused the problem for all other child divs below it.</p>
  
  <p>Here is an example:</p>
  
  <pre><code>&lt;div&gt;      &lt;---- had only z-index, was missing position:relative
    &lt;div&gt;
      &lt;div&gt;
         &lt;div&gt;   &lt;---- this div with z-index could not get in front because of the first one
         &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>