在图像下流动的文本

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 condition检查为空。