固定div内的搜索栏

Question

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

在滚动时将搜索输入保持在适当位置时出现问题。

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

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

我已经仔细阅读了几个问题以找到解决方案，但是对于我的具体情况并没有任何运气。

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

（请确保扩展窗口以便于使用）

Answer 1

一个简单的方法是使用新的position: sticky;属性（MDN）。

add

Answer 2

尝试一下。您需要告诉它如果它位于div内

 .row-main .main-header {
    width: 100%;
    height: 80px;
    background-color: #131313;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11);
    position:fixed;
}