Elements in HTML/CSS move when I resize browser :(

Question

I tried changing the position to absolute, fixed and static. But, still get the same result.

I have also tried wrapping it in a div element, but I might've done it wrong so I would appreciate help with that. (If this is the solution)

The.table is not the only element that moves around, but I am hoping once I figure out a fix for one, it will apply to them all.

I want the elements to remain in the spot I place them in, and if anything shrink a bit.

This is the object I am trying to get to stay in one place.

This is my first time using html & css, so I would appreciate any help I could get.

Thanks for your time:)

 .table { font-family: "Fira Sans", sans-serif; border-collapse: collapse; overflow-y: scroll; height: 520px; width: 425px; position: relative; display: block; z-index: 6; left: 120rem; bottom: 90rem; background-color: white; border: 4px solid black; z-index: 5; }

 <table class="table"> <thead> <tr> <th> <input type="text" class="search-input" placeholder="Abbreviation"> </th> <th> <input type="text" class="search-input" placeholder="Full Name"> </th> <th> </tr> <tr> <td>XXX</td> <td>XXX, XXX, XXX</td> </tr> <tr> </table> </div>

Answer 1

I've taken the liberty of modifying your html. I've added some elements and reworked your css so as to help you understand how styles can affect one another. your initial .table css contained too many rules that redefined what a table element is. Hopefully my changes will help you gain some insights.

Also you should find an online resource to help with HTML and CSS.
MDN is THE source for web development.

ADDENDUM:

---

The nice thing about HTML and CSS is that they allow you to mix and match elements and rules. We have many tools to customize the look and feel of a page. But this is also the bane of our existence.

FWIW: Just because we can embed data collection into a table (in the header or otherwise) doesn't mean we should.

Yes, it's legal. Yes, it'll work.

But...it alters the HTML definition. Which is again perfectly legal and it'll work. Until it doesn't. Like using CSS to redefine a display:table to display:block

Then there is the matter of accessibility concerns, like screen readers finding inputs where it's expecting column headers

The various components of an element are designed to work together and should only be redefined with care. Chances are if we find ourselves trying to make one element work like another, we missed something.

 .outer { position: relative; }.dontmove { position: absolute; width: 500px; }.table { font-family: "Fira Sans", sans-serif; border-collapse: collapse; background-color: white; border: 4px solid black; width: 100% }.table th, .table td { padding: 2px 6px; }.table th>input { width: 100%; }

 <div class="outer"> <div class="dontmove"> <table class="table"> <thead> <tr> <th> <input type="text" class="search-input" placeholder="Abbreviation"> </th> <th> <input type="text" class="search-input" placeholder="Full Name"> </th> <th> </tr> <tr> <td>XXX</td> <td>XXX, XXX, XXX</td> </tr> <tr> </table> </div> </div>