如何使用Vue 3和Bootstrap叠加带有搜索建议的div。

huangapple go评论58阅读模式
英文:

How to overlay div with search suggestions using vue 3 boostrap

问题

我正在尝试使用Vue 3 Boostrap库构建一个具有匹配建议的小搜索框。我希望建议框位于Z轴上覆盖下面的div,而不是将其推下去。我已经尝试过使用z-index,但没有成功。

这里是在CodePen中的代码示例:https://codepen.io/vue_novice/pen/wvxbyMQ

<div id='app'>
  <b-container fluid>
    <b-row align-h="center">
      <b-col cols="4">
        <h1 class="text-center mt-4 mb-4">My Search</h1>
        <b-input-group size="lg">
          <b-form-input placeholder="Type Something"></b-form-input>
          <b-input-group-append>
            <b-button variant="primary">&#128269;</b-button>
          </b-input-group-append>
        </b-input-group>

        <b-list-group>
          <b-list-group-item>Suggestion 1</b-list-group-item>
          <b-list-group-item>Suggestion 2</b-list-group-item>
          <b-list-group-item>Suggestion 3</b-list-group-item>
          <b-list-group-item>Suggestion 4</b-list-group-item>
        </b-list-group>
      </b-col>
    </b-row>

    <b-row align-h="center">
      <b-col cols="6">
        <h1>I want to be hidden behind the Suggestions &#128522;</h1>
        <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </b-col>
    </b-row>
  </b-container>
</div>

如何调整代码以使我的搜索建议框在Z轴上方覆盖下方的文本?

英文:

I am currently trying to build a small search box with matching suggestions using the vue 3 boostrap library. I want the suggestions box to overlay the following div on the z-axis instead of pushing it down. I have already tried to work with the z-index, but without success.

Here I have the code example in a codepen: https://codepen.io/vue_novice/pen/wvxbyMQ

&lt;div id=&#39;app&#39;&gt;
  &lt;b-container fluid&gt;
    &lt;b-row align-h=&quot;center&quot;&gt;
      &lt;b-col cols=&quot;4&quot;&gt;
        &lt;h1 class=&quot;text-center mt-4 mb-4&quot;&gt;My Search&lt;/h1&gt;
        &lt;b-input-group size=&quot;lg&quot;&gt;
          &lt;b-form-input placeholder=&quot;Type Something&quot;&gt;&lt;/b-form-input&gt;
          &lt;b-input-group-append&gt;
            &lt;b-button variant=&quot;primary&quot;&gt;&#128269;&lt;/b-button&gt;
          &lt;/b-input-group-append&gt;
        &lt;/b-input-group&gt;

        &lt;b-list-group&gt;
          &lt;b-list-group-item&gt;Suggestion 1&lt;/b-list-group-item&gt;
          &lt;b-list-group-item&gt;Suggestion 2&lt;/b-list-group-item&gt;
          &lt;b-list-group-item&gt;Suggestion 3&lt;/b-list-group-item&gt;
          &lt;b-list-group-item&gt;Suggestion 4&lt;/b-list-group-item&gt;
        &lt;/b-list-group&gt;
      &lt;/b-col&gt;
    &lt;/b-row&gt;

    &lt;b-row align-h=&quot;center&quot;&gt;
      &lt;b-col cols=&quot;6&quot;&gt;
        &lt;h1&gt;I want to be hidden behind the Suggestions &#128522;&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
      &lt;/b-col&gt;
    &lt;/b-row&gt;

  &lt;/b-container&gt;

&lt;/div&gt;

How do I adjust the code so that my suggestion box under the search overlays my text below on the z-axis?

答案1

得分: 0

将以下CSS代码添加到.list-group

.list-group {
  position: absolute;
  left: 15px;
  right: 15px;
  z-index: 1;
}
英文:

It needs to be positioned absolutely, the list group.

add this css to the .list-group

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.list-group {
  position: absolute;
  left: 15px;
  right: 15px;
  z-index: 1
}

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月8日 22:25:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/75387183.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定