Раскрывающийся список предложений в activJS и пользовательском интерфейсе материалов, не работающих с использованием zIndex

Question

Я пытаюсь создать раскрывающееся меню, в котором названия городов возвращаются с карт Google, чтобы оно отображалось в верхней части раздела под ним с помощью z-Index.Вот минимальный код.

class PlacesAutocomplete1 extends React.Component {
  ....

  render() {
    const open = Boolean(anchorEl);
    const { anchorEl } = this.state;
    const searchOptions = {
      types: ['(cities)'],
      componentRestrictions: { country: 'in' }
    }

    return (
      <div>
        <PlacesAutocomplete
          value={this.state.address}
          onChange={this.handleChange}
          onSelect={this.handleSelect}
          searchOptions={searchOptions}
          shouldFetchSuggestions={this.state.address.length > 3}
        >
          {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
            <div style={{ position: 'relative', zIndex: 2 }}>
              <TextField
                id="outlined-search"
                type="search"
                label="city"
                margin="dense"
                onClick={this.handleClick}
                variant="outlined"
                {...getInputProps()}
              />
              <div>
                {loading && <div>Loading...</div>}
                {suggestions.map(suggestion => {
                  const className = suggestion.active
                    ? 'suggestion-item--active'
                    : 'suggestion-item';
                  // inline style for demonstration purpose
                  const style = suggestion.active
                    ? { backgroundColor: '#fafafa', cursor: 'pointer', position: 'relative', zIndex: 2 }
                    : { backgroundColor: '#ffffff', cursor: 'pointer', position: 'relative', zIndex: 2 };
                  return (
                    <Paper {...getSuggestionItemProps(suggestion, {
                      className,
                      style
                    })} elevation={1}>
                      <span>{suggestion.description}</span>
                    </Paper>
                  );
                })}
              </div>
            </div>
          )}
        </PlacesAutocomplete>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <h2>Suggestions Should be on the top of Me</h2>
        </div>
      </div>
    );
  }
}

Может кто-нибудь помочь мне с тем, что я делаю неправильно?Вот код демоверсии песочницы

Answer 1

Работает, но вы используете относительное положение и не переполняетесь следующим блоком.Вы должны использовать position: absolute для блока с предложениями.Взгляните на раздвоенный пример здесь https://codesandbox.io/embed/flamboyant-tree-hc1v6