时间戳

首页 > 解决方案 > 绝对定位的子 div 离开父 div

html - 绝对定位的子 div 离开父 div

问题描述

在我的情况下，当我将它的底部值设置为零时，绝对定位的子元素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，它的底部与 parent 的底部不对齐bgCoverSection。

但是当我将carouselbuttonCntainertop 设置为 0 时，它的 top 将与 parent 的 top 对齐bgCoverSection。

标签： htmlcss

解决方案

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

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

推荐阅读