While scrolling the page, I encounter a small issue where the elements stack on top of each other. Additionally, when I perform a search, the elements move with the keyboard. I have attached screenshots to illustrate the problem. My goal is to have the categories remain fixed at the bottom without moving along with the keyboard. Furthermore, I want them to be displayed one below the other instead of stacked. For instance, the Action category should be at the top, followed by the Fantasy category at the bottom of the Action category. All these elements are contained within a header. I am thinking of creating a div for the categories and making the subcategories scroll inside the div. Can someone assist me with the CSS for this or provide an explanation on how to implement it?
Screenshots
<body>
<header>
<-- rest of code -->
<section>
<h4>Popular</h4>
<i class="bi bi-chevron-left"></i>
<i class="bi bi-chevron-right"></i>
<div class="cards">
</div>
</section>
<section>
<h4>Fantasy</h4>
<i class="bi bi-chevron-left"></i>
<i class="bi bi-chevron-right"></i>
<div class="cards">
</div>
</section>
</header>
<script src="script.js"></script>
</body>