Datalist moving on the web page

See more:

HTML

HTML5

datalist

I have enabled a datalist on my website, but I have noticed a major error when I scroll around my website.

My code looks like this:

<input type="text" name="search_keywords" id="search_keywords" placeholder="What are you looking for?" value="" list="all">
    
<datalist id="all">
 <option value="ATest"></option>
 <option value="BTest"></option>
 <option value="CTest"></option>
 <option value="XTest"></option>
 <option value="YTest"></option>
 <option value="ZTest"></option>
</datalist>

When you scroll down the web page, you can see the suggestions move around and not stick to the input box.

An example is shown here: https://codepen.io/samkough/pen/VQdVze

What I have tried:

- I have tried to use positioning on the by making it static but it didn't work.
- I also tried to lock the scroll of the website as the box is being typed, but that solution was too complex and wasn't really solving the problem.