1

In my case an absolutely positioned child element carouselbuttonCntainer is going far some pixels below parent div bgCoverSection when I set it's bottom value as zero.

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

In the code above code I set carouselbuttonCntainer bottom to 0, it's bottom doesn't align with bottom of parent bgCoverSection.

But when I set carouselbuttonCntainer top to 0, it's top will align with top of parent bgCoverSection.

Guillermo Gutiérrez
  • 17,273
  • 17
  • 89
  • 116
Ayyappa Gollu
  • 906
  • 7
  • 16
  • Set relative position for parent and also It seems you need to set `vertical-alignment` for those elements. – Ali Sheikhpour Jul 10 '19 at 06:21
  • If you want absolute positioned child to be affected by parent, set `position: relative` to parent element – jank Jul 10 '19 at 06:21
  • the position absolute will set your element at absolute position with respect to the window, i.e. at left-top by default. Since you are providing the left and bottom it will position it at the bottom of screen with 50% space on left. If you want to position it with respect of the parent div, you should use the position as relative. This is also recommended. – Akshay Mishra Jul 10 '19 at 06:36

3 Answers3

0

You must have to provide position: relative; to parent when ever you use position: absolute;.

In your case please add position:relative to this class .bgCoverSection.

Sumit Patel
  • 4,530
  • 1
  • 10
  • 28
0

You need to add position: relative to its parent div.

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

Give the parent position as relative it would-be working

vjay
  • 25