css - 与输入分离的reactjs autosuggest建议列表

Question

我使用 react-autosuggest 创建了一个自动建议，现在我正在尝试设计布局。我从 example 中获取了一个 css这似乎工作正常。

当我将此 css 复制到我的元素时，建议列表与自动建议的输入完全分离，如下图所示:

我还尝试移动示例中的 div，但列表跟随输入(应该如此)

这是我尝试使用的来自 codepen 的 css:

.react-autosuggest__container {
  position: relative;
}

.react-autosuggest__input {
  width: 240px;
  height: 30px;
  padding: 10px 20px;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.react-autosuggest__input:focus {
  outline: none;
}

.react-autosuggest__container--open .react-autosuggest__input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.react-autosuggest__suggestions-container {
  position: absolute;
  top: 51px;
  width: 280px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 1px solid #aaa;
  background-color: #fff;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 2;
}

.react-autosuggest__suggestion {
  cursor: pointer;
  padding: 10px 20px;
}

.react-autosuggest__suggestion--focused {
  background-color: #ddd;
}

Answer 1

我认为此 CSS 仅适用于示例中使用的沙箱。特别是

.react-autosuggest__suggestions-container {
  position: absolute;
  top: 51px;

这意味着建议容器始终显示在距离页面顶部 51 像素的位置。由于页面上的其他原因，输入可能会挡路并被推到一边，因为它没有 position: absolute 属性。

我不知道您是否使用类似网格系统或其他方式来管理您网站上元素的位置？您可能会考虑使用它而不是用 px 定义位置。