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

Source: Stakeoverflow

0 Comments

Leave a reply

Your email address will not be published. required fields are marked *