html - 修复了 div 内的搜索栏

Question

我有一个包含 50 名玩家的列表，称为玩家{1..50}，并创建了一个搜索输入，我可以在其中按名称过滤他们。

我在滚动时无法将搜索输入保持在适当的位置。

如果我将其设置为fixed或absolute，它会忽略父级div限制，因为它应该，这是一个问题，因为我希望它保留在父级内部div，就像现在一样。

如何才能实现此目的，以便在您滚动浏览播放器时搜索栏保持在同一位置？

我已经阅读了几个问题来找到解决方案，但对我的具体案例没有任何运气。

完整代码可以在这里查看: https://jsfiddle.net/nullpointer9/f748qnks/

(确保扩展窗口以便于使用)

Answer 1

因此，一个简单的方法是使用新的 position: sticky;属性(MDN)。

.job-search {
    position: sticky;   /* The magic */
    z-index: 1;         /* Ensure it stays on top of other player divs */
    top: 0px;           /* Where it should stick to */
}