preventRelativeDivOverlapping.md

CSS - Prevent Relative Divs Overlapping Other Element

SOURCE

(For overlapping div see Cacher, Gist).

The Key info to remember is that Element with position absolute doesn't contribute to parent container width and height. So its parent div just collapse as if they were empty.

The solution is to just provide a height large enough for the parent div.

So for a design like this:

.container-fluid {
  overflow: hidden;  <--- prevent video make page wider than necessary
}

.info-margin-left {
  margin-left: 120px;
}

#online-pharmacy-section {
  margin-top: 184px;
}

#doctors-come-to-you-section {
  position: relative;
  width: 100%;
  height: 770px;  <--- this is the important bit

  %base-doctors-come-to-you-video {
    position: absolute;
    top: 0;
    left: 27%;
  }
  #doctors-come-to-you-video {
    @extend %base-doctors-come-to-you-video
  }
  #doctors-come-to-you-video-cover {
    @extend %base-doctors-come-to-you-video;
    img {
      width: 1055px;
      height: 756px;
    }
  }
  #doctors-come-to-you-info {
    position: absolute;
    top: 280px;
    left: 0;
  }
}
#online-pharmacy-section {
  position: relative;
  width: 100%;
  height: 770px;
}

<div class="container-fluid">
  <div id="doctors-come-to-you-section" class="info-margin-left">
    <div id="doctors-come-to-you-video">
      <video class="video-player"
             height="720"
             autoplay="autoplay"
             loop="loop"
             muted="true"
             poster="assets/img/home-video-poster.jpg">
        <source type="video/mp4" src="https://cdn.jiohealth.com/video/home-2017-06-12.mp4">
        <source type="video/webm" src="https://cdn.jiohealth.com/video/home-2017-06-12.webm">
      </video>
    </div>
    <div id="doctors-come-to-you-video-cover">
      <img src="assets/images/doctors-come-to-you-video-cover.png"/>
    </div>
    <div id="doctors-come-to-you-info">
      <app-info-with-buttons [title]="'home.our_doctor_come_to_you' | translate"
                             [info]="homeVisitInfo"
                             [button1Text]="'home.book_home_visit'"
                             [button2Text]="'home.learn_more'"></app-info-with-buttons>
    </div>
  </div>
  <div id="online-pharmacy-section">
    <app-info-with-buttons [title]="'home.trusted_online_pharmacy' | translate"
                           [info]="'home.certified_medicine' | translate"
                           [icon1]="'assets/icons/delivery-icon.png'"
                           [icon2]="'assets/icons/discount-icon.png'"
                           [icon1Text]="'home.delivery_time'"
                           [icon2Text]="'home.discount_info'"
                           [button1Text]="'home.shop_now'"></app-info-with-buttons>
  </div>
</div>