이미지 아래에 흐르는 텍스트

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을 비워 두십시오.