html - 文字在图像下方流动

Question

我的导航栏中有搜索栏和图像(上面写着“Debian”)，它看起来像这样。

因此，当我在搜索栏中搜索某些内容时，结果会在图像下方显示，如下所示。 我希望这些结果出现在图像上，以便可以正确看到每个结果。还有一件事，当我没有在搜索栏中输入任何内容时，看到仍然显示结果，那么如何解决这些问题？我的 HTML 代码看起来像这样......

<div class="search_box" >
    {% csrf_token %}
    <form>
        <div class="form-group">
            <input required type="text" id="search" name="search" class="form-control" placeholder="Search Anything">
            <ul id="search-results" class="list-group" style="position:absolute;">
            </ul>
        </div>
    </form>
</div>

Answer 1

1) 为您的下拉菜单使用更高的 css z-index 值。

2) 要在没有数据时隐藏搜索结果，添加一个if 条件 检查是否为空。