CSS中的绝对位置

Question

我是 CSS 新手，我试图在它的父 div 的 0,0 位置放置一些点，但是当我根据下面的代码这样做时，这些点消失了。

* CSS 代码：*

.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 代码：*

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

我试图将每个点放在其父 div timeslot 的绝对位置。我可能会遗漏一些东西，但我真的尝试了我所知道的一切。希望能得到一些帮助。

Answer 1

将位置相对添加到您的父母

.timeslot{
  // ...
  position: relative;
}