(컨테이너의 높이 변화에 따라) 컨테이너에 요소를 부착하는 반응 CSS

Question

여기에 볼 수있는이 양면 CSS 슬라이드 쇼에는 약간의 악몽이 있습니다. https://codepen.io/byte37/pen/GymRjb.
PC/가로 모드에서는 정상적으로 작동하지만 응답 형에서는 제대로 작동하지 않습니다. 버튼과 텍스트를 같은 위치에 두려고합니다. 다른 슬라이드 쇼의 10 % 오른쪽/왼쪽과 중간에 있습니다. 화면 크기가 변경되면 컨테이너 (슬라이드 쇼)가 높이를 변경합니다. @media max-width CSS로 시도했지만 제대로 작동하지 않았습니다.
나는 아주 간단한 일에 매달 렸고 나는 주제에 대해 더 잘 아는 사람으로부터 도움을받을 수있어서 기쁩니다.

코드 :

<div class="main-slider"> 
     <div class="row"> 
     <a href="/it/xxx"> 
      <div class="fade-art"> 
       <img src="https://static.pexels.com/photos/14621/Warsaw-at-night-free-license-CC0.jpg"> 
       <img src="http://www.bigfoto.com/stones-background.jpg"> 
       <img src="http://sites.psu.edu/mab6390mis387/wp-content/uploads/sites/39460/2016/02/mountain.jpg"> 
       <div class="titolo-art"> 
        <div><span class="font-w-100 white-text btn-cbi-soft-blu btn btn-md">Left</span></div> 
        <br> 
        <p class="font-w-100 white-text p-slider-rx">Bla bla bla bla bla</p> 
       </div> 
      </div> 
     </a> 
     <a href="/it/yyy"> 
      <div class="fade-outlet"> 
       <img src="http://www.freedigitalphotos.net/images/img/homepage/golf-1-top-82328.jpg"> 
       <img src="http://globalmedicalco.com/photos/globalmedicalco/9/42934.jpg"> 
       <img src="https://static.pexels.com/photos/88212/pexels-photo-88212.jpeg"> 
       <div class="titolo-outlet"> 
        <span class="font-w-100 white-text btn-cbi-soft-blu btn btn-md">Right</span> 
        <br> 
        <p class="font-w-100 white-text">Bla bla bla bla bla</p> 
       </div> 
      </div> 
     </a> 
     </div> 
</div> 

CSS는 :

.main-slider { 
    width: 100%; 
    overflow: hidden; 
    margin-top: -30px; 
} 
.titolo-art { 
    position: absolute; 
    top: 50%; 
    left: 80%; 
} 
.titolo-outlet { 
    position: absolute; 
    top: 50%; 
    right: 80%; 
} 
.p-slider-rx { 
    left: -107%; 
    position: absolute; 
} 

@keyframes fade { 
    0% { opacity: 0; } 
    11.11% { opacity: 1; } 
    33.33% { opacity: 1; } 
    44.44% { opacity: 0; } 
    100% { opacity: 0; } 
} 
/* ** */ 
.fade-outlet { position:relative; float:right; height:400px; width:50%; background-color: #009de3; overflow: hidden;} 
.fade-outlet img { position:absolute; left:0; right:0; opacity:0; /*width:100%;*/ animation-name: fade; animation-duration: 18s; animation-iteration-count: infinite;} 
/* ** */ 
.fade-art img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 12s; animation-iteration-count: infinite; /*width:100%;*/ /*margin-top: -15%;*/} 
.fade-art { position:relative; float:left; height:400px; width:50%; background-color:#c3b091; overflow: hidden;} 
/* ** */ 
.fade-art img:nth-child(1) {animation-delay: 2s;} 
.fade-art img:nth-child(2) {animation-delay: 12s;} 
.fade-art img:nth-child(3) {animation-delay: 24s;} 
/* ** */ 
.fade-outlet img:nth-child(1) {animation-delay: 6s;} 
.fade-outlet img:nth-child(2) {animation-delay: 18s;} 
.fade-outlet img:nth-child(3) {animation-delay: 30s;} 

.btn-cbi-soft-blu { 
    background-color: transparent; 
    border: 1px solid #fff; 
    padding:15px; 
    color: #fff; 
} 

감사합니다! :)

Answer 1

정확하게 질문을 이해하면 버튼을 가운데에서 고정 거리에두기를 원할 것입니다. 이것을 변경해보십시오.

.titolo-art { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 50px; 
 
} 
 

 
.titolo-outlet { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50px; 
 
}