修复了 div 内的搜索栏

Question

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

我在滚动时将搜索输入保持在适当的位置时遇到问题。

如果我将其设置为fixedor 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 */
}