Absolute position in CSS - html

Question

I'm new to CSS and I'm trying to place some dots at position 0,0 of it's parent div, but when I do so according to the below code, the dots disappear.
* CSS Code: *
.timeslot{
background-color: green;
border-top: solid gray;
}
.timeslot.selected{
border: #cc0000;
}
.timeslot.selected .dot{
background-color: #cc0000;
}
.timeslot .dot{
background-color: gray;
}
.dot {
position: absolute;
height: 25px;
width: 25px;
background-color: firebrick;
border-radius: 50%;
display: inline-block;
}
.square {
height: 25px;
width: 40px;
background-color: #555;
}
.dot .span {
padding-top: 8px;
}
.time-line-box {
height: 100px;
padding: 50px 0;
width: 100%;
/* background-color: burlywood;*/
}
.swiper-container {
width: 95%;
margin: auto;
overflow-y: auto;
}
.swiper-wrapper{
display: inline-flex;
flex-direction: row;
overflow-y:auto;
justify-content: center;
border-top-width: 20px;
}
.swiper-container::-webkit-scrollbar-track{
background:#a8a8a8b6;
}
.swiper-container::-webkit-scrollbar{
height: 2px;
}
.swiper-container::-webkit-scrollbar-thumb{
background: #4F4F4F !important;
}
.swiper-slide {
text-align: center;
font-size: 12px;
width: 50px;
height: 100%;
/*position: relative;*/
}
* HTML Code: *
<section class="time-line-box">
<div class="swiper-container text-center">
<div class="swiper-wrapper">
<div *ngFor="let time of dropDownArray" class="timeslot swiper-slide">
<div class="dot" [style.background-color]="getBackgroundColor(time)"><span>{{time.label}}</span></div>
</div>
</div>
</div>
</section>
I'm trying to place each dot at the absolute position of it's parent div timeslot . I might be missing something but I really tried everything I know. Hope to find some help.

Answer 1

Add position relative to your parent
.timeslot{
// ...
position: relative;
}