css - 响应式 Css 将元素粘贴到容器(随着容器的高度变化)

Question

我对这个双面 css 幻灯片有点噩梦，你可以在这里看到:https://codepen.io/byte37/pen/GymRjb .
它在 pc/landscape 模式下工作正常，但在响应模式下它不能像我想的那样工作。我试图让按钮和下面的文本保持在相同的位置，从另一个幻灯片放映右/左 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;
}