CSS 元素相互重叠

Question

当其中一个元素改变其大小时，就会发生这种情况。一个例子是幻灯片。一张图片具有特定尺寸，第二张图片更高。在幻灯片下方有一个文本，当您从一张图片切换到另一张图片时，较高的图片会覆盖文本，反之亦然。
如何解决？

var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}

* {box-sizing: border-box}
    .mySlides1 .mySlides2 {display: none;}
    img {vertical-align: middle;}
    
    /* Slideshow container */
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }
    
    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }
    
    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    
    /* On hover, add a grey background color */
    .prev:hover, .next:hover {
      background-color: #f1f1f1;
      color: black;
    }
.text
    {
        font-family: 'Raleway', sans-serif;
        position:absolute;
        top:400px;
        text-align:center;
        font-size:4vw;
        width:100%;
    }

 <div class="slideshow-container">
          <div class="mySlides1">
            <img src="https://image.shutterstock.com/image-photo/wide-angle-panorama-autumn-forestmisty-260nw-1195159864.jpg" style="width:100%">
          </div>
          <div class="mySlides1">
            <img src="https://lh3.googleusercontent.com/proxy/s8S4ZpwQ-5fifJ552bJMpjS5CmGBgPkk99ghh0HrrN8CG6yH1-bMC0w9bgV9d4IpF1I5niwn7w5kBZEghSn6U86emGTTTctebiP2y7_77dqpmRTYeuiI" style="width:100%">
          </div>
        
          <div class="mySlides2">
            <img src="https://image.shutterstock.com/image-photo/wide-angle-panorama-autumn-forestmisty-260nw-1195159864.jpg" style="width:100%">
          </div>
          <div class="mySlides2">
            <img src="https://lh3.googleusercontent.com/proxy/s8S4ZpwQ-5fifJ552bJMpjS5CmGBgPkk99ghh0HrrN8CG6yH1-bMC0w9bgV9d4IpF1I5niwn7w5kBZEghSn6U86emGTTTctebiP2y7_77dqpmRTYeuiI" style="width:100%">
          </div>
        
          <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
          <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
        </div>
        <h1 class="text">What's the opposite of irony? Wrinkly.</h1>

Answer 1

如果您只想防止文本与图像重叠，请在 CSS 中尝试:

.text {
  font-family: "Raleway", sans-serif;
  position: relative;
  text-align: center;
  font-size: 4vw;
  width: 100%;
}

选项 2(未测试)您可以将位置应用到您的 .text 中，如下所示:

.text {
    font-family: "Raleway", sans-serif;
    position: absolute;
    bottom: 0;
    text-align: center;
    font-size: 4vw;
    width: 100%;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  padding-bottom: 100px; /* adjust for your text size */
}