root not having a z-index causes .autocomplete-container to be hidden by other relatively positioned elements

[leoskyrocker]

Problem I found a UI issue when there is a relatively positioned element below the autocomplete input, the outcome is the autocomplete items will be hidden under that element.

Why that happens I am not familiar with z-index but my guess is when 2 elements (e.g. root and another element A) are rendered with position: relative, they implicitly shares the same z-index, but when there is a child of one of these elements (.autocomplete-container in this case) and the child overlaps with element A, then element A will be on top of the .autocomplete-container.

My workaround This was solved in my code by introduce an explicit z-index on the root element that is 1 or greater.

Proposal I wonder if having an explicit z-index set to a high number in the default style for root would be a reasonable solution.

(Btw, Thanks for writing this library. It's the best out there we found, and we're super happy with it so far.)

[daose]

In my case I had to put it on autocompleteContainer, not root. Mine ended up looking like this:

<PlacesAutocomplete
    classNames={{ autocompleteContainer: 'ac-container' }}
    {...otherProps}
/>

.ac-container {
  position: absolute;
  top: 100%;
  background-color: white;
  border: 1px solid #555555;
  width: 100%;
  z-index: 1000;
}

[djamesfar]

I have the same problem, but in fact z-index is not working for me. I have a row of links below the places-autocomplete component, and when the dropdown appears, the links are visible through the dropdown (the white text of the shows over the blue text of the hovered option item), and when you click to select an option that is positioned over one of the links, the link is invoked instead of selecting the option!
I set the z-index of the links to 1, and the z-index of the .pac-container and .pac-item to 1000; makes no difference. Before dropdown, note links below input:

And when dropdown is open, note links still visible:

[sambokai]

Is this still an issue?