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

Answer 1

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;
}

    
I am loading