Chrome Css bug with Z-index

I've come across a strange "bug" on Chrome where the z-index is not showing properly like in every other browser (including IE).

I've read all related questions related to it and almost everyone in their questions were missing position or overflow.

The link for the website is THIS 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.

I would really appreciate it if someone could point me in the right direction or provide a sample to help me out.

Thanks!

Solution from answers: 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.

Here is an example:

<div>      <---- had only z-index, was missing position:relative
  <div>
    <div>
       <div>   <---- this div with z-index could not get in front because of the first one
       </div>
    </div>
  </div>
</div>

Solution

You have to add

z-index: 1000; /* or whatever value works*/
position: relative;

to your #big-map. This will fix it. You forgot to add a position to that div, which makes that a z-index doesn't get applied.

The CSS of #big-map should look like this:

#big-map {
  width: 100%;
  height: auto;
  /* background-color: rgb(229, 227, 223); */
  /* background-color: #E0E0E0; */
  -webkit-transform: translateZ(0);
  display: block;
  z-index: 1000;
  position: relative;
}

I agree with Toni Leigh though: in the future you need to share code and a working example, so this question is also value in the future. If you can't share code or set up an example with a minimum amount of code, you can always ask it in the chat, where we gladly help you with such "bugs".