HTML/CSS - Elements one under other and scroll not working-CodePudding

I have a small problem when scrolling the page, the elements is one under other, also when i click to do a search, the elements follow the keyboard. Ill show in the screenshots, the problem. The intention is category fixed at the bottom, without following the keyboard, also that they isnt one under other, they need to be one below the other, for example: Action category at the top and the fantasy category at the bottom of the action. remembering that all elements is inside a header. I was thinking in create a div category and scrolling these subcategories inside the div. can anyone help with this css or explain me how to do it?

Screenshots

Searching

Without keyboard

Css

  <body>
    <header>
      <-- rest of code -->
  
      <section>
        <h4>Popular</h4>
        <i ></i>
        <i ></i>
        <div >
        </div>
      </section>
      <section>
        <h4>Fantasy</h4>
        <i ></i>
        <i ></i>
        <div >
        </div>
      </section>
    </header>
    <script src="script.js"></script>
  </body>

CodePudding user response：

replace relative by fixed

header section .cards {
position:fixed;
}

CodePudding user response：

the problem was in the structure of the html, I already reformulated it and it was just as I wanted. sorry for making this topic for nothing.