How to position an image on top of another image using CSS?

Solution 1

HTML

<img src="" class="image_1">
<img src="" class="image_2">

CSS

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.image_1 {
  z-index: 1;
}
.image_2 {
  z-index: 2;
}

Solution 2

HTML

<div class="example">
  <img class="image_1" src="" />
  <img class="image_2" src="" />
</div>

CSS

.example {
  position: relative;
  top: 0;
  left: 0;
}
.image_1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image_2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

Solution 3

HTML

<div class="container">
    <img src="" alt="">
    <img class="child" src="" alt="">
<div>

CSS

.container {
  border: 0;
  float: left;
  position: relative;
} 
.child {
  border: 0;
  position: absolute;
  top: 0;
  right: 0;
 } 

Share this post