html - 在列表项中覆盖一个 div

Question

我正在尝试在表单项内实现自动完成功能，当用户键入时，它会创建一个带有建议列表的下拉菜单，这些建议是可点击的。这是在 Ionic Framework 内部完成的.

我制作了一个 codepen 来演示我想要的东西。 (看看自动完成字段，以及它下面的灰色隐藏框)

http://codepen.io/pbernasconi/pen/Cgobi

我的下拉列表:

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">License #</span>
    <input type="text" placeholder="AUTO COMPLETE FIELD">
    <div class="input-dropdown">
      <ul class="input-dropdown-menu">
        <li>...</li>
      </ul>
    </div>
  </label>
</div>

我的 CSS:

.input-dropdown {
    position: absolute;
    background: grey;
    border: solid 1px #000;
    z-index: 1001;
    overflow: visible;
}

.input-dropdown-menu {
}

这个问题是 position: absolute 不允许我覆盖自动完成字段下方的列表项，正如您在 codepen 中看到的那样。

Here's an example of a solution ，出于某种原因，这对我不起作用。

有谁知道如何实现这个下拉菜单来覆盖它的父级？

Answer 1

label item overflow是隐藏的，下拉列表在里面，看不到。