How to make two Div fixed with respect toeach other? - html

Question

I have a Div below which is a button and as my screensize changes height of the Div changes due to which the button changes its position sometimes it hides behind the Div as I have provided z-index. How can I make position of the button fixed with respect to the Div even when the screensize changes?
Here is my HTML code:--
<div class="row" id="event">
<div class="col-lg-1 col-md-1 col-xs-1"></div>
<div class="col-lg-10 col-md-10 col-xs-10 ">
<section *ngFor="let event of events; let i = index" [style.backgroundColor] = "colorsArray[i]" class="eventSectionCSS">
<legend class="legendCSS"> {{event.title}}</legend>
<br>
<div class="row" style="margin-left: 15px;" >
<div class="col-lg-6 col-md-6 col-xs-6" style="display: inherit;" >
<div class="row" >
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
<h2 class="presenterNameCSS" >{{ event.SMEPresentedByFirstName | uppercase}} </h2>
</div>
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-6" style="margin-left: -10px;" >
<h2 class="presenterNameCSS" > {{ event.SMEPresentedByLastName | uppercase}} </h2>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" ></div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" id="image__event_both" >
<div class="col-lg-6 col-md-6 col-xs-6">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img id="image__1" (click) = "clickToShare()" src="../assets/img/Fwd Icons/share.png" >
</div>
<div class="back">
<div class="row" >
<section class="widget sharing_events_widget">
<share-buttons (click) = "closeShareIt(i)" [url]="'http://mentoriaweb.azurewebsites.net/#/app/Login'"
[count]="false"
[totalCount]="true"
[defaultStyle]= "true"
(popUpClosed) = "true"
[google]="googleInner"
[pinterest]="false"
[linkedIn]="false"
[tumblr]="tumblrInner"
[reddit]="false"
[stumbleUpOn]="false">
</share-buttons>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-6">
<img id="image__2" (click) = "notifyMe(event.uid)" src="../assets/img/Fwd Icons/notify.png" >
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 presenterImageDivCSS " >
<img style="margin-left: 31px;" src="assets/img/avatar.png">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p class="smeSnippetCSS" > {{event.snippet}} </p>
<a style="color:#fff;" >...Read more</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 dashed_height"style="">
<div class="date1" >{{event.eventDate*1000 | date:'dd'}}</div>
<div class="date2"><b>{{event.eventDate*1000 | date:'MMM' | uppercase}}</b> <br>
<p class="date3">{{event.eventDate*1000 | date:'yyyy'}}</p>
</div>
<div class="date4"> <b>{{ event.eventDate | date:'hh:mm a'}}</b></div>
</div>
</div>
<br>
</section>
<div>
<button class="btn btn-primary width-100 mb-xs" id="sme_register" role="button" ><span class="sme_buttonn"><b> Register</b></span> </button>
</div>
</div>
<div class="col-md-1 col-lg-1 col-xs-1"></div>
</div>

Answer 1

You can achieve this by using position relative. Position fixed is respective to the screen.
The fiddle you updated is not showing what actually are upto. I can't see position fixed on button.