Перенос заголовка вперед через css

Question

Ищем заголовок для отображения спереди.Это образец изображения.У нас прозрачный фон.Я пытаюсь отправить div за прозрачным изображением заголовка и разместить текст под этим div (test), который является test 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

Этот кодовый блок должен помочь вам начать: 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>