title: Absolute position in CSS
body: <p>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.</p>
  
  <p><strong>* CSS Code: *</strong></p>
  
  <pre><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;*/
    }
  
  </code></pre>
  
  <p><strong>* HTML Code: *</strong></p>
  
  <pre><code>&lt;section class="time-line-box"&gt;
      &lt;div class="swiper-container text-center"&gt;
           &lt;div class="swiper-wrapper"&gt;  
              &lt;div *ngFor="let time of dropDownArray" class="timeslot swiper-slide"&gt;
                &lt;div class="dot" [style.background-color]="getBackgroundColor(time)"&gt;&lt;span&gt;{{time.label}}&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt; 
     &lt;/div&gt;
  &lt;/section&gt;
  
  </code></pre>
  
  <p>I'm trying to place each dot at the absolute position of it's parent div <strong><em>timeslot</em></strong> . I might be missing something but I really tried everything I know. Hope to find some help.</p>