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>

我知道我必须对z-index和position做些事情，但是我不确定到底是什么。

CSS：

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

Answer 1

“ position：absolute”可能会有所帮助。下面的CSS将结果的父级位置设置为相对。这使您可以将结果框绝对放置，但相对于“ .wizard”容器为子容器以来。

请注意，“ position：absolute”将#results容器带出文档流（但相对于“ .wizard”放置），并且应出现在z-index中其他元素的上方。如果不是这样，您可能需要调整z索引（使其成为更高的索引）。

.wizard {
    position: relative;
}

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

如果您显示当前应用于这些元素的CSS的示例，这将有助于进行故障排除。

如何在另一个div元素上方获取Ajax搜索结果？

1 个答案: