在列表项中覆盖 div答案

【问题标题】：Overlay a div inside a list item在列表项中覆盖 div
【发布时间】：2014-07-20 03:01:29
【问题描述】：

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

我制作了一个 codepen 来演示我想要什么。（查看自动完成字段，以及它下方的灰色隐藏框）

我的下拉菜单：

<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，由于某种原因对我不起作用。

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

【问题讨论】：

标签： html css css-position ionic-framework

【解决方案1】：

标签项溢出是隐藏的，下拉列表在里面，所以看不到。

【讨论】：

谢谢，没想到这么简单。我加了.item-autocomplete { position: static; overflow: visible; }

【解决方案2】：

// jquery code

$(document).ready(function() {
$("#test").focus(function(){
    $(".input-dropdown-menu").show();
});
$("#test").mouseleave(function(){
    $(".input-dropdown-menu").hide();
});
});


 //use css 

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

.input-dropdown-menu {
display:none;
}


 //use html


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

【讨论】：