Javascript 如何在CSS中隐藏列表后面的内容？

我的目标是将一些内容隐藏在通过jQuery打开/关闭的列表后面。当前，当列表显示时，它会向下推所有内容。然而，我希望它显示为它像一层在它上面。我读了一些文章，并考虑使用

z-index

。虽然我试过使用它，但它不能正常工作

$（文档）.ready（函数（）{
$（“#myList”）.toggle（）；
$（“#myInput”）。关于（“焦点”，函数（）{
$（“#myList”）.toggle（）；
});
$（“#myInput”）。在（“focusout”，function（）上{
//在这里，它将等待100毫秒来隐藏列表。
setTimeout（函数（）{
$（“#myList”）.toggle（）；
}, 100);
});
$（“#myInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#myList li”）.filter（函数（）{
$（this）.toggle（$（this）.text（）.toLowerCase（）.indexOf（value）>-1）
});
});
//这是选择选项后填充字段的代码。
$（#myList li”）。在（“单击”，函数（）上{
var texto=$（this.text（）；
$（“#myInput”）.val（texto）；
});
});
。筛选搜索{
宽度：40%；
}
.列表组{
z指数：1；
}
.盒子{
宽度：100px；
高度：100px；
}
瑞德先生{
背景：#f00；
}

可筛选列表
在输入字段中键入一些内容以在列表中搜索特定项目：



您可以使用以下方法：

.list-group {
  position: absolute;
}

您可以通过以下方式进行操作：

.list-group {
  position: absolute;
}