두 Div를 서로 어떻게 고정시켜야합니까?

Question

나는 아래의 Div 버튼을 가지고 있으며, 화면 크기가 Div의 위치 변화로 인해 버튼의 위치가 바뀌기 때문에 Z- 인덱스를 제공 할 때 div 뒤에 숨어있는 경우가 있습니다. 스크린 크기가 변경되는 경우에도 Div에 대해 버튼의 위치를 ​​고정 시키려면 어떻게합니까?

가 여기 내 HTML 코드입니다 : -

<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

당신은 위치를 사용하여이 작업을 수행 할 수 있습니다. 고정 된 위치는 화면과 관련됩니다.

업데이트 한 바이올린은 실제로 어떤 내용인지 보여주지 못합니다. 버튼에 고정 된 위치를 볼 수 없습니다.