how to place an image over another image in css code example

Example 1: how to place an image over another image in html

<!--Change the values of top and left to change the location of the images-->
<!--If you want to change which image is infront use z-index: (index number)-->
<!--The higher the z-index number will be displayed infront-->
<style>
.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
  z-index: 2;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
  z-index: 1;
}
</style>
<body>
<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>
</body>

Example 2: image on top of image css

.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

Tags:

Html Example

Recent Posts