I've made a search box with auto-suggestions. I don't want to have the suggestions push down the other elements on the page.
What I did to fix this:
I gave the suggestions position: fixed and added a window event listener to update its top and left on scroll, to make it appear as if it's dropping down from the search box.
This is quite obviously not a good way to achieve this at all. Can anyone give pointers on how to improve this, please? Thanks!
I don't know where your suggestions are coming from (AJAX call? fixed list on page? something entirely different?) so it's not possible to provide a full example. However, you're going to be much better off using an existing widget rather than building your own.
If you have a fixed list of suggestions, consider using a <datalist> object: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
If you are using ajax to retrieve suggestions, consider using jQuery UI's autocomplete or a similar solution: https://jqueryui.com/autocomplete/
Basically it sounds like you are reinventing capabilities that already exist and are already implemented in a user friendly and multi-browser-compatible way. If you have a strong reason to do so, at least provide code samples of your solution so that people can assist!
