Overlapping a div with an image using z-index [duplicate] - html

Question

This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 7 years ago.
A CSS animation is continuously playing behind an image. When the image is not loaded it will display, but when loaded the image will overlap the animation. I'm using z-index to achieve this, but it's not working.
The image should hide loading animation with the z-index property.
Note: I can't use any javascript solution to hide the loading animation and show it after image load.
CSS / HTML / Demo
.leftprev {
overflow:auto;
position:absolute;
height:99%;
width:85%;
}
.loadingslide {
z-index: 50; /* Loading div's z-index */
}
.spinner.big {
display: block;
height: 40px;
}
.spinner {
bottom: 0;
display: none;
font-size: 10px;
height: 30px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
}
.spinner.big > div {
width: 6px;
}
.spinner > div {
animation: 1.2s ease-in-out 0s normal none infinite stretchdelay;
background-color: #333;
display: inline-block;
height: 100%;
width: 6px;
}
a {
color: #470a09;
text-decoration: none;
}
.slideshow .slidebro .leftprev #slideshowpic {
display: block;
margin: 0 auto;
width: auto;
z-index: 100; /* image's z-index */
}
<div class="leftprev">
<div class="loadingslide"> <!-- Loading Animation div (should be running in background of the image) -->
<div id="tracking" class="spinner big">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<a id="targetslide" target="_blank" title="Click to view fit to screen" href="">
<img src="http://www.placehold.it/500" alt="" id="slideshowpic" /> <!-- The image (should mask the loading animation div) -->
</a>
</div>

Answer 1

You have to add position to the element that you want to apply z-index.
From CSS-tricks:
The z-index property in CSS controls the vertical stacking order of
elements that overlap. As in, which one appears as if it is physically
closer to you. z-index only effects elements that have a position
value other than static (the default).
http://css-tricks.com/almanac/properties/z/z-index/

Answer 2

To position the loading animation correctly:
Place the loading div inside the container
Set the container as position: relative so that the loading div is positioned in relation to it
To hide the loading animation when the image is loaded:
The loading div is given z-index: 1
The image is given position: relative so that it can have a z-index property
The image is given z-index: 2 and will overlap
In this example the image is half the width of the container and you can see how it overlaps the loading div.
CSS / HTML / Demo
html, body {
height: 100%;
margin: 0;
}
.content {
height: 500px;
width: 500px;
background: #e91e63;
margin: 0 auto;
position: relative;
}
.content img {
z-index: 2;
position: relative;
width: 250px;
height: 500px;
}
.loading {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 1em;
padding: 20px;
background: #FF0;
text-align: center;
font-weight: bold;
z-index: 1;
}
<div class="content">
<div class="loading">I am loading</div>
<img src="http://www.placehold.it/250X500" />
</div>