javascript - 防止文本覆盖幻灯片图像

Question

这是我根据找到的示例拼凑而成的幻灯片的 MCVE。

我要解决的问题是防止第四个文本 block 覆盖图像(或被图像覆盖)。

第二个文本 block 位于第一个和第二个文本 block 之间的图像之后，而幻灯片容器不会影响第 4 个文本 block 的位置 - 就好像幻灯片容器不存在一样。我猜这与 css 中的 position 有关。

将使用它的地方是在类似 wordpress 的 CMS 中，它用菜单、侧边栏包装内容。页脚等使页面响应，所以我想保留这种行为。

如何让第四个文本 block 符合幻灯片图像占用的空间？

var current = 0 ; 
slides = document.getElementsByClassName("slide") ; 
setInterval 
  ( function() 
    { 
    current = (current != slides.length - 1) ? current + 1 : 0; 
    for (var i = 0; i < slides.length ; i++) 
      { 
      slides[i].style.opacity = 0 ; 
      } 
    slides[current].style.opacity = 1 ;  
    }, 2000) ;

.slide {
  width: 100%;
  position: absolute;
  transition: opacity 0.5s ease-in;
  }

.slideshow-container {
  max-width: 300px;
  position: relative;
  margin: auto;
  }

<h2>Title 1</h1>

<p>text before image.</p>

<img src="https://www.dropbox.com/s/zy36m99oqw61xuf/image1.jpg?raw=1" width="128" />

<h2>Title 2</h2>

<p>Text after image.</p>

<h2>Title 3</h1>

<p>text before slide.</p>

<div class="slideshow-container">
	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/zy36m99oqw61xuf/image1.jpg?raw=1" width="128" />
	</div>

	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/miek22fw9ghqgw2/image2.jpg?raw=1" width="128" />
	</div>

	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/l6ehi40kdlmli63/image3.jpg?raw=1" width="128" />
	</div>
</div>

<h2>Title 4</h2>

<p>Text after slide.  We want this title and text block to start after the image container so that this text is not on top of the image or obscured by it.</p>

Answer 1

您需要在 .slideshow-container 上设置高度{}

var current = 0 ; 
slides = document.getElementsByClassName("slide") ; 
setInterval 
  ( function() 
    { 
    current = (current != slides.length - 1) ? current + 1 : 0; 
    for (var i = 0; i < slides.length ; i++) 
      { 
      slides[i].style.opacity = 0 ; 
      } 
    slides[current].style.opacity = 1 ;  
    }, 2000) ;

.slide {
  width: 100%;
  position: absolute;
  transition: opacity 0.5s ease-in;
  }

.slideshow-container {
  max-width: 300px;
  position: relative;
  margin: auto;
  height: 200px;
  }

<h2>Title 1</h1>

<p>text before slide.</p>

<div class="slideshow-container">
	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/zy36m99oqw61xuf/image1.jpg?raw=1" width="128" />
	</div>

	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/miek22fw9ghqgw2/image2.jpg?raw=1" width="128" />
	</div>

	<div class="mySlides fade">
		<img class="slide" src="https://www.dropbox.com/s/l6ehi40kdlmli63/image3.jpg?raw=1" width="128" />
	</div>
</div>

<h2>Title 2</h2>

<p>Text after slide.  We want this title and text block to start after the image container so that this text is not on top of the image or obscured by it.</p>