Overlapping a div with an image using z-index

Question

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>

`z-index` is only used if the element has a position such as `absolute` or `fixed`. Otherwise, it is ignored and elements are positioned according to the location in the DOM hierarchy. — jfriend00, Oct 04 '14 at 18:53

emmanuel · Accepted Answer · 2014-10-04T19:48:35.403

5

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/

edited Oct 04 '14 at 19:48

answered Oct 04 '14 at 18:41

emmanuel

9,607
10
25
38

misterManSam · Answer 2 · 2014-10-04T19:41:37.407

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>

Overlapping a div with an image using z-index

2 Answers2

Linked