title: Fixed search bar inside div
body: <p>I have a list of 50 players which are called player{1..50} and created a search input where I can filter them by name.  </p>
  
  <p>I am having issues keeping the search input in place while scrolling.  </p>
  
  <p>If I set it to <code>fixed</code> or <code>absolute</code>, it ignores the parent div limits, as it should, which is an issue as I want it to stay inside the parent div, as it is now.</p>
  
  <p>How can I achieve this so the search bar stays in the same place while you scroll through the Players? </p>
  
  <p>I have read through several questions already to find a solution but haven't had any luck for my specific case.</p>
  
  <p>Full code can be seen here: 
  <a href="https://jsfiddle.net/nullpointer9/f748qnks/" rel="nofollow noreferrer">https://jsfiddle.net/nullpointer9/f748qnks/</a></p>
  
  <p>(Make sure to extend the window for easier use)</p>