Javascript 反应自动完成下拉位置按下其他输入元素

我有自动完成下拉列表，我遵循了这个。我面临显示下拉项的问题

如我在链接中所示，下拉项显示在

div

标记中，带有

position

作为

relative

css

.autocomplete包装器{
宽度：300px；
位置：绝对位置；
显示：内联块；
}
.autocomplete wrapper>div{
宽度：100%；
z指数：1；
}
.自动完成包装器输入{
边框：1px实心#cecece；
填充物：5px 5px；
边界半径：3px；
字体大小：12px；
宽度：100%；
}
.autocomplete包装器输入：焦点{
边框颜色：#0F67FF；
盒影：无；
大纲：无；
}
.autocomplete包装器autocomplete{
位置：绝对位置；
z指数：-1；
}
.自动完成包装器.下拉列表{
宽度：100%；
填充：0；
文本对齐：左对齐；
最大高度：280px；
溢出：隐藏；
溢出y：自动；
背景色：#ffffff；
边框：1px实心#0F67FF；
边界顶部：无；
z指数：2；
}
.autocomplete包装器.item{
显示：块；
光标：指针；
字体大小：10px；
填充：10px；
}
.autocomplete包装器.item.selected-item{
背景色：#0069ff；
颜色：#FAFBFC；
}
.autocomplete包装器。项目：悬停{
背景色：#0069ff；
颜色：#FAFBFC；
}

我添加了

z-index: 500;
position: fixed;

到包装器样式

.autocomplete wrapper.dropdown{…

。它现在看起来像这样

.autocomplete-wrapper .dropdown {
  width: 100%;
  padding: 0;
  text-align: left;
  max-height: 280px;
  overflow: hidden;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #0F67FF;
  border-top: none;
  z-index: 500;
  position: fixed;
}

---

z-index:500；

和

position:fixed；

这两个元素对它的工作都是必不可少的。

您可以发布更多的代码吗？例如，此自动完成的父元素是什么，以及自动完成所干扰的元素是什么。