I've experimented with different position values like absolute, fixed, and static without success.
Wrapping the element in a div didn't yield the desired result, so I'm seeking assistance to correct this. (If that is the solution)
The issue extends beyond just the .table element, but finding a fix for one will hopefully solve all similar problems.
My goal is to keep the elements where I place them or have them shrink slightly if needed.
This particular object is the focal point of my concern regarding positioning.
This being my first experience with html & css, any guidance would be greatly appreciated.
Thank you 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>