Даталист перемещается по веб - странице

---

Я включил datalist на своем веб-сайте, но я заметил серьезную ошибку, когда я прокручиваю свой веб-сайт.

Мой код выглядит примерно так:

<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>

Когда вы прокручиваете веб-страницу вниз, вы можете видеть, что предложения перемещаются и не прилипают к полю ввода.

Пример приведен здесь: https://codepen.io/samkough/pen/VQdVze

Что я уже пробовал:

- Я пытался использовать позиционирование на экране, сделав его статичным, но это не сработало.
- Я также попытался заблокировать прокрутку веб-сайта, когда поле набирается, но это решение было слишком сложным и на самом деле не решало проблему.

---