响应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;
}