Text fließt unter Bild

Question

Ich habe die Suchleiste und ein Bild ("Debian" darauf geschrieben) in meiner Navigationsleiste, sieht es etwa so aus.

Also, wenn ich etwas in meiner Suchleiste suche, werden die Ergebnisse unter dem Bild so etwas wie folgt. Ich möchte diese Ergebnisse über das Bild kommen, so dass jedes Ergebnis richtig angezeigt werden kann. und es gibt noch eine Sache, die zeigt, wenn ich nichts in meine Suchleiste eingegeben habe, zeigt mir immer noch die Ergebnisse, also wie man diese Probleme beheben kann? mein HTML-Code sieht dies so etwas wie ...

<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) für die Drop-Down höheren css z-index Wert verwenden.

2) Um die Suchergebnisse auszublenden, wenn keine Daten vorhanden sind, fügen Sie if condition hinzu, um nach freien Daten zu suchen.