来自搜索的 OutputHTML 将内容向下推送而不是顶部答案

【问题标题】：OutputHTML from search pushing content down instead of on-top来自搜索的 OutputHTML 将内容向下推送而不是顶部
【发布时间】：2020-10-15 15:19:01
【问题描述】：

我目前在一个 javascript 文件输出自定义 div 类的页面中有一个搜索栏，例如：

<div class="course-card"><h5>${match.coursename}</h5></div>

因此，每当用户开始在搜索栏中输入内容时，都会有一个自动完成功能（通过使用正则表达式从 json 文件中进行匹配）。我使用了来自tutorial 的代码。

问题是，我在搜索表单下方有一行新卡片，因此生成的 div 类（自动完成建议）将卡片向下推而不是在顶部创建：

我正在尝试实现这样的目标：

但是，结果却是把它下面的所有内容都往下推。

我试过了

.course-cards, .content-cards {
    position: absolute;
    top: 0px; 
    left 0px;
}

在匹配的 course-cards 的 div 及其下方的内容上，并更改 z-index 但它会弄乱从搜索栏生成的课程卡。

任何建议将不胜感激

【问题讨论】：

【解决方案1】：

之后，seach-results 块将紧贴在搜索栏的底部，并将在其下方的页面内容上方。

【讨论】：

【解决方案2】：

我修好了：

.content-container {
z-index: 1;
}

#match-list {
    z-index: 10;
    position: absolute;
}

我在内容卡周围放了一个 div，在带有上述 css 的结果卡列表周围放了一个 div

【讨论】：