Html 如何使两个Div相互固定？

我有一个Div，下面是一个按钮，当我的屏幕大小改变时，Div的高度也随之改变，按钮的位置也随之改变，有时它会隐藏在Div后面，正如我提供的z-index一样。即使屏幕大小发生变化，如何使按钮相对于Div的位置固定

以下是我的HTML代码：--

{{event.title}


{{event.SMEPresentedByFirstName |大写}}
{{event.SMEPresentedByLastName}大写}


{{event.snippet}
…阅读更多
{{event.eventDate*1000 |日期：'dd'}
{{event.eventDate*1000 | date:'MMM'|大写}}

{{event.eventDate*1000 |日期：'yyyy'}
{{event.eventDate}date:'hh:mm a'}


登记

您可以通过使用相对位置来实现这一点。固定位置与屏幕相对应

---

您更新的小提琴没有显示实际的用途。我看不到固定在按钮上的位置

您可以通过使用相对位置来实现这一点。固定位置与屏幕相对应

---

您更新的小提琴没有显示实际的用途。我看不到固定在按钮上的位置

如能在JSFIDLE工作，将不胜感激！这里是部分，下面是按钮，因为我可以看到按钮的屏幕大小位置改变，但我希望它是固定的。以上是您要求的我的JSFIDLE。如能使用JSFIDLE，将不胜感激！这里是部分，下面是按钮，因为我可以看到按钮的屏幕大小位置改变，但我希望它是固定的。上面是你问的我的JSFIDLE，你是说我需要给出部分位置：relative和按钮位置：fixed.No。什么都不应该解决。我正在减小fiddle的屏幕大小，但是button没有在div后面。是的，这是因为我已经为按钮和部分提供了z索引。实际上，根据要求，按钮应该正好位于部分下方，该部分将覆盖按钮的一小部分（这就是我提供z索引的原因）。没有Zindex，我已移除z索引。我希望这有帮助，所以你说我需要给出部分位置：相对和按钮位置：fixed.No。什么都不应该解决。我正在减小fiddle的屏幕大小，但是button没有在div后面。是的，这是因为我已经为按钮和部分提供了z索引。实际上，根据要求，按钮应该正好位于部分下方，该部分将覆盖按钮的一小部分（这就是我提供z索引的原因）。没有Zindex，我已移除z索引。我希望这有帮助

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