I am having trouble with positioning my search results on top of other divs. To see the issue, you can watch the screen recording by clicking on this link: https://drive.google.com/file/d/1kU_vl2ZAmSCok0pxnTTvY hacxqcZZ9m_/view?usp=sharing
These are the search entries:
{% if results|length %}
<div id="instant-results">
<ul class="list-unstyled result-bucket" >
{% for r in results %}
<li class="result-entry" data-suggestion="{% cycle 'Target 1' 'Target 2' 'Target 3' %}" data-position="1" data-type="type" data-analytics-type="merchant">
<a href="{{ r.url }}" class="result-link">
<div class="media">
<div class="media-left">
<img src="http://mellon.co.tz/wp-content/uploads/2016/05/noimage.gif" class="media-object">
</div>
<div class="media-body">
<h4 class="media-heading">{{ r.title }}</h4>
<p>Nationality: {{ r.owner.get_nationality_display }} | Age: {{ r.owner.age }}</p>
</div>
</div>
</a>
</li>
{% endfor %}
</div>
This section appears on the webpage:
<section class="d-lg-table bg-secondary">
<div class="d-none d-lg-table-cell align-middle w-50 bg-center bg-no-repeat bg-cover text-center" style="background-image: url({% static 'images/slider/messi.jpg' %});"><a class="video-player-button" href="https://player.vimeo.com/video/93641234?color=ac32e4&title=0&byline=0&portrait=0" data-fancybox data-wid
th="1000" data-height="563"><i class="fe-icon-play"></i></a><span class="d-block video-player-label text-muted pt-3">Click me to watch the video!</span></div>
<div class="d-lg-table-cell py-5 my-lg-5 px-2 px-lg-5 bg-gradient-1">
<div class="p-3">
<h2 class="h3 block-title mb-4 heading-white">Search for a player</h2>
<p class="text-muted pb-4">Start typing and the results will appear immediately! Start typing and the results will appear immediately! Start typing and the resu
lts will appear immediately!</p>
<div class="wizard">
<input type="text" id="q" class="form-control" placeholder="Search for a player..." autocomplete="off"/>
<div id="results"></div>
</div>
</div>
</div>
</section>
I understand that I need to make some adjustments with z-index and position properties, but I'm unsure of the exact steps.
The CSS code:
/*---------- Search ----------*/
.result-bucket li {
padding: 7px 15px;
}
.instant-results {
background: #fff;
width: 100%;
color: gray;
position: absolute;
top: 100%;
left: 0;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .175);
box-shadow: 0 2px 4px rgba(0, 0, 0, .175);
display: none;
z-index: 10;
}
.form-search {
transition: all 200ms ease-out;
-webkit-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
}
.search-form {
position: relative;
max-width: 100%;
}
.result-link {
text-decoration:none!important;
}
.result-link .media-body {
font-size: 13px;
color: gray;
}
.result-link .media-heading {
font-size: 15px;
font-weight: 400;
}
.result-link .media-object {
width: 50px;
padding: 3px;
margin-right:10px;
border: 1px solid #c1c1c1;
border-radius: 3px;
}
.result-entry + .result-entry {
border-top:1px solid #ddd;
}
.wizard {
position: relative!important;
}
#results {
postion: absolute!important;
width: 100%;
top: 50px; /* Height of the input */
left: 0;
}