html - 如何让 Ajax 搜索结果位于另一个 div 元素之上？

Question

我正在努力将我的搜索结果定位在其他 div 之上。您可以在此处查看屏幕录像以查看问题: https://drive.google.com/file/d/1kU_vl2ZAmSCok0pxnTTvYhacxqcZZ9m_/view?usp=sharing

这些是搜索条目:

{% 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>

这是网页上的部分:

<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&amp;title=0&amp;byline=0&amp;portrait=0" data-fancybox data-width="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 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 results 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>

我知道我必须对 z-index 和位置做一些事情，但我不确定具体是什么。

CSS:

/*---------- 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 input */
    left: 0;
}

Answer 1

"position:absolute"可能有帮助。下面的 CSS 将结果父位置设置为相对位置。这允许您将结果框定位为绝对但相对于“.wizard”容器，因为它是一个 child 。

请注意，“position: absolute”将 #results 容器带出文档流(但相对于“.wizard”定位)，并且应该出现在 z-index 中的其他元素之上。如果不是，您可能需要调整 z-index(使其成为更高的索引)。

.wizard {
    position: relative;
}

#results {
    postion: absolute;
    width: 100%;
    top: 50px; /* Height of input */
    left: 0;
}

如果您展示了当前应用于这些元素的 CSS 的示例，它将有助于解决问题。