绝对定位的子div离开父div

Question

在我的例子中，当我将其底部值设置为零时，绝对定位的子元素carouselbuttonCntainer比父div bgCoverSection 低了几个像素。

.HTML：

  <div class="bgCoverSection" id="homePageSection">
    <div id="carouselbuttonCntainer">
      <div id="carouselbuttonInnerCntainer">
        <input type="radio" class="imageCarouselRadioButton" 
        name="imageCarouselRadioButton" checked="checked">
        <input type="radio" class="imageCarouselRadioButton" 
        name="imageCarouselRadioButton">
        <input type="radio" class="imageCarouselRadioButton" 
        name="imageCarouselRadioButton">
    </div>
    </div>
   </div>

.CSS：

   //parent
  .bgCoverSection{
    height: 614px;
    width: 100%;
    padding: 0px;
    background-color: aqua;
    text-align: center;
  }
  //child
  #carouselbuttonCntainer{
    position: absolute;
    bottom: 0;
    left: 50%;    
  }
  .imageCarouselRadioButton{
    width: 20px;
    height: 20px;
   }

在上面的代码中，我将底部carouselbuttonCntainer设置为 0，它的底部与父bgCoverSection的底部不一致。

但是当我carouselbuttonCntainer顶部设置为 0 时，它的顶部将与父bgCoverSection的顶部对齐。

Answer 1

当您使用 position: absolute; 时，您必须向父级提供position: relative;。

在您的情况下，请将position:relative添加到此类.bgCoverSection。

Answer 2

您需要将position: relative添加到其父div。

.bgCoverSection{
  height: 614px;
  width: 100%;
  padding: 0px;
  background-color: aqua;
  text-align: center;
  position: relative;
}

Answer 3

将父位置作为相对