How to Overlap Images using CSS

Overlapping the image means placing one image on the top of the other. To overlap the image we will be using the position and z-index property of CSS.

z-index will only work if the position property is present. position can be relative or absolute.

z-index can have any value from -infinity to +infinity. The element with a higher value of z-index will stay on top of the element with a lower value of z-index.

Example 1: if the z-index of imageA is 1 and imageB is 2 then imageB will on top of imageA.

Example 2: If the z-index of ImageA is 1, imageB is 2, imageC is 3 and imageD is 4 then imageD will be on the top and imageA will be on the bottom. The order will be imageD > imageC > imageB > imageA

HTML code

<!DOCTYPE html>
<html>
<head>
<title>How to Overlap Images using CSS</title>
</head>

</body>
<div>
  <h3>How to Overlap Images using CSS</h3>
  <img id="img1" src="https://images.unsplash.com/photo-1432958576632-8a39f6b97dc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80">

  <img id="img2" src=" https://images.unsplash.com/photo-1499343162160-cd1441923dd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80">
</div>
</body>
</html>

CSS code

#img1 {
  position: absolute; 
  width: 300px;
  z-index: -1;
}

#img2 {
  position: absolute;
  width: 300px;
  top: 100px;
  left:100px;
  z-index 1;
}

The output is

Overlapping multiple images using CSS

HTML code

<!DOCTYPE html>
<html>
<head>
<title>How to Overlap Images using CSS</title>
</head>

</body>
<div>
  <h3>How to Overlap Images using CSS</h3>
  <img class="img1" src="https://images.unsplash.com/photo-1432958576632-8a39f6b97dc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80">

  <img class="img2" src=" https://images.unsplash.com/photo-1499343162160-cd1441923dd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80">
  
  <img class="img3" src="https://images.unsplash.com/photo-1697222691126-c1be7bde3ac5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1896&q=80">

  <img class="img4" src="https://plus.unsplash.com/premium_photo-1694425775169-9e53ffab71f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80">

</div>

</body>
</html>

CSS code

.img1 {
  position: absolute;
  width: 300px;
  z-index: -1;
}

.img2 {
  position: absolute;
  width: 300px;
  top: 100px;
  left:50px;
  z-index 1;
}

.img3 {
  position: absolute;
  width: 300px;
  top: 150px;
  left:100px;
  z-index 2;
}

.img4 {
  position: absolute;
  width: 300px;
  top: 200px;
  left:150px;
  z-index 3;
}