如何设计一个建议框，因此它不推开下面的元素？

Question

我有此位置输入字段，使用MAPBOX的位置自动完成。发生的事情是，每次建议出现时，都会推动下面的其他项目。就像在这中一样 ScreenShot 。

<input className="w-full bg-gray-100 px-4 py-2 rounded-lg focus:outline-none"
  {...location}
  type="text"
></input>

       {location.suggestions?.length > 0 && (
          <div className="relative px-2 py-4">
            {location.suggestions.map((suggestion, index) => {
              return (
                <p className="cursor-pointer"
                  key={index}
                  onClick={() => {
                    location.setValue(suggestion.place_name);
                    location.setSuggestions([]);
                    setValue("location", suggestion.place_name);
                  }}
                >
                  {suggestion.place_name}
                </p>
              );
            })}
          </div>
        )}

但是，它可以通过相对定位来期待下方的元素，但是，当我使用绝对定位时，它只是进入页面顶部，我猜是因为默认情况下，绝对是用top设置的， 0px。我还有其他输入元素，因此我不确定如何估计我应该将顶部设置为顶部，或者甚至是对其进行硬编码的好习惯。您可以看到在此中使用绝对定位的外观 ScreenShot 。

Answer 1

您需要将容器的position设置为relative，然后向下拉列表添加background-color：

* {
  box-sizing: border-box;
}
.input-box {
  position: relative;
  width: 300px;
    border: 1px solid #dadada;
}

.input-box input {
  width: 100%;
  padding: 8px;
}

.input-dropdown {
  position: absolute;
  border: 1px solid #dadada;
  background-color: white;
  max-height: 200px;
  left: 0;
  right: 0;
  top: 100%;
  overflow: auto;
}

.input-dropdown > div {
  padding: 10px;
  border-bottom: 1px solid #dadada;
}

<div class="input-box">
  <input type="text">
  <div class="input-dropdown">
    <div>
      Element 1
    </div>
        <div>
      Element 2
    </div>
        <div>
      Element 3
    </div>
        <div>
      Element 1
    </div>
        <div>
      Element 2
    </div>
        <div>
      Element 3
    </div>
        <div>
      Element 1
    </div>
        <div>
      Element 2
    </div>
        <div>
      Element 3
    </div>
        <div>
      Element 1
    </div>
        <div>
      Element 2
    </div>
        <div>
      Element 3
    </div>
        <div>
      Element 1
    </div>
        <div>
      Element 2
    </div>
        <div>
      Element 3
    </div>
  </div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit vero, fugit officia beatae tempora nesciunt provident doloremque. Omnis voluptas hic neque incidunt, iste nihil corrupti, odit reprehenderit cum adipisci error!
</p>

您可以在这里找到更多信息：https:// css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/