Unable to use scroll bar beneath a fixed position div - html

Question

There is a HTML table with a scrollbar, inside a div. There is another div with absolute position which overlaps with the table div. The problem is, table div's scroll bar is behind the absolute div (flying balloon animation), because of which I am unable to use it. Is there a way to use the scroll bar beneath the absolute div?
HTML:
#parent {
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 400px;
height: 100vh;
overflow: hidden;
}
.message {
position: absolute;
left: 0;
bottom: -120px;
height: 120px;
width: 120px;
background-color: white;
color: white;
line-height: 115px;
text-align: center;
font-family: Arial, sans-serif;
font-weight: bold;
border-radius: 60px;
animation: move 6s infinite linear;
opacity: 0.8;
}
.message:nth-child(2) {
left: 120px;
animation-delay: 2s;
}
.message:nth-child(3) {
left: 240px;
animation-delay: 4s;
}
#keyframes move {
0% {
bottom: -120px;
}
100% {
bottom: 100%;
}
}
<div class="container leaderboard">
<br>
<p class="text-right">Logged in as <strong>{{ player.user }}</strong> <img class="" src="url" /></p>
<div class="card">
<h6 class="card-header text-uppercase bg-dark text-white">Leaderboard</h6>
<div class="card-body">
<input type="text" id="leaderboard-search" onkeyup="leaderboardSearch()" placeholder="Search for names..">
<div class="overflow-wrap">
<table class="table leaderboard-table table-hover sortable">
<!-- Table here -->
</table>
</div>
</div>
</div>
<div id="parent">
<div class="message" style="background-image: url(sampleurl)"></div>
<div class="message" style="background-image: url(sampleurl)"></div>
<div class="message" style="background-image: url(sampleurl)"></div>
</div>
</div>