与页面其余部分重叠的列表

Question

我正在构建一个 Vue 组件，该组件通过 API 调用带有输入文本的城市列表进行搜索。我需要显示的列表不展开标题组件，并与第一张图像（图片上的天空）重叠。我尝试使用 z-index，但无法正常工作。

欢迎任何其他的实现想法。我尝试使用下拉菜单，但不可写。

编辑：抱歉，我忘记添加代码了。

<!--template-->
<div class="input-city">
        <input  v-model="input" type="text" ref="citySearch" />        
        <div class="cities-list">
          <span
            v-for="city in results"
            :key="city.id"
            @click="setCity(city)"
            class="city-item"
          >
            {{ city.name }}, {{ city.region }}, {{ city.country }}
          </span>
        </div>
      </div>

// styles
.input-city {
  display: flex;
  flex-direction: column;
}

.cities-list {
  display: flex;
  flex-direction: column;
}

.city-item {
  border: 1px solid black;
}

Answer 1

您正在寻找的功能称为绝对定位，它是通过为元素提供position 样式值absolute 或fixed 来实现的。

从技术上讲，该元素是在所谓的“流内容”之外进行的。通过从流内容中取出一个元素，剩余的流内容元素的行为就像绝对定位的元素不存在一样。
绝对定位元素的实际位置是相对于

• 如果position 设置为absolute，则为closest positioned ancestor
• 如果position 设置为fixed，则为它最近的视口。

在您的示例中，这应该有效：

.input-city {
  position: relative;
}
.input-city .cities-list {
  position: absolute;
  top: 100%;
}

1. position: relative on .input-city 使该元素成为.cities-list 最接近的定位元素。
2. position: absolute 将 .cities-list 排除在内容流之外
3. top: 100% 给它的上边距等于其父母的身高。

在这种情况下，典型的样式解决方案是给重叠元素一个background-color 和一个box-shadow，这样它就可以与它重叠的内容区分开来（但这些是实现细节）。

要了解有关position（CSS 中的一个基本概念）如何工作的更多信息，您可能需要从这篇文章开始：CSS Positioning 101。