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的top设置为0时，它的顶部将与父级bgCoverSection的顶部对齐。

Answer 1

每次使用position: relative;时，都必须向父母提供position: absolute;。

根据您的情况，请将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

将父母的职位作为相对应的职位

绝对定位的子div离开父div

3 个答案: