How do i place text over crossfading slider? - html

Question

How could I place a text over the image?
When I try it just makes the text stay in one of the images.
I don't want the text to change or disappear, it has to be the same text for all the images.
I have tried to set position as absolute and place it over the image but won't show for all images just the first one.
.slider {
max-width: 1080px;
height: 95%;
margin: 0 auto;
padding-top: 120px;
position: relative;
}
.slide1,.slide2,.slide3 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(images/child.jpg)no-repeat center;
background-size: cover;
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
background: url(images/tech.jpg)no-repeat center;
background-size: cover;
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371564896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;
background-size: cover;
animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
<div class="slider">
<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>
</div>

Answer 1

Add an element, position it absolute also, and give it a bigger z-index than that of the images.
.slider {
position: relative;
max-width: 1080px;
height: 95vh;
margin: 0 auto;
padding-top: 120px;
overflow: hidden;
}
.slider-text {
position: absolute;
left: 0;
top: 0 z-index: 2;
}
<div class="slider">
<div class="slider-text"> My text </div>
<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>
</div>
Change the left/top properties to reposition it.