通过CSS将标头放在前面

Question

寻找标题显示在前面。这是一个示例图像。 我们有透明的背景。 我正在尝试在透明标题图像后面发送一个div并将文本放置在该div（test）下，这是测试测试。试图调整z索引但没有用，在这里可以看到。我试图将div调整为较小但它不会居中并在移动视图中移位。请忽略滚动

http://jaipur.onlinewebshop.net/sample-page/

var slideIndex = 0;
carousel();

function carousel() {
   var i;
   var x = document.getElementsByClassName("mySlides");
   for (i = 0; i < x.length; i++) {
     x[i].style.display = "none"; 
   }
   slideIndex++;
   if (slideIndex > x.length) {slideIndex = 1} 
   x[slideIndex-1].style.display = "block"; 
   setTimeout(carousel, 2000); 
}

.mySlides {display:none;}

<!--placed in head section-->
<div class="w3-content" id="klo1" style="max-width: 100%; text-align: center; background-color: #d9eaf2;color: #a00a9b; font-size: 29px; font-weight: bolder;font-family: 'BioRhyme', cursive;">
   <div class="mySlides w3-animate-top w3-xlarge w3-white w3-card-4">
       <p id="aaaa">test&nbsp;-&nbsp;test1 !!!</p>
   </div>
   <div class="mySlides w3-animate-top w3-xlarge w3-white w3-card-4">
       <p id="aaaa">test&nbsp;-&nbsp;test2 !!!</p>
   </div>
   <div class="mySlides w3-animate-top w3-xlarge w3-white w3-card-4">
       <p id="aaaa">test&nbsp;-&nbsp;test3 !!!</p>
   </div>
   <div class="mySlides w3-animate-top w3-xlarge w3-white w3-card-4">
       <p id="aaaa">test&nbsp;-&nbsp; test4 !!!</p>
   </div>
</div>

此处的标题图片：

Answer 1

此Codepen应该可以帮助您入门：https://codepen.io/anon/pen/wQLdEQ

<div class="container">
   <div class="w3-content" id="klo1">
 <div class="mySlides w3-animate-top w3-xlarge w3-white w3-card-4">
     <p id="aaaa">test&nbsp;-&nbsp;test1 !!!</p>
 </div>
 <div class="mySlides w3-animate-top w3-xlarge w3-white w3-card-4">
     <p id="aaaa">test&nbsp;-&nbsp;test2 !!!</p>
 </div>
 <div class="mySlides w3-animate-top w3-xlarge w3-white w3-card-4">
     <p id="aaaa">test&nbsp;-&nbsp;test3 !!!</p>
 </div>
 <div class="mySlides w3-animate-top w3-xlarge w3-white w3-card-4">
     <p id="aaaa">test&nbsp;-&nbsp; test4 !!!</p>
 </div>
     </div>
</div>