reactJS 中的建议下拉列表和 material UI 无法使用 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

reactJS 中的建议下拉列表和 material UI 无法使用 zIndex

Suggestions dropdown in reactJS and material UI not working using zIndex

css

styles

z-index

reactjs