Absolute position in CSS

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;
}