YogeshChauhan.com
How to position an image on top of another image using CSS?
August 8, 2020


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

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 How to uninstall Cocoapods from the Mac OS? #6 Solution to “TypeError: ‘x’ is not iterable” in Angular 9



Recently Posted

Feb 25 How to set default timezone using PHP? Feb 24 WordPress: How to loop through a repeater field in ACF? Feb 24 How to get ACF values from custom post type? Feb 24 WordPress get_posts Examples Feb 24 How to modify the latest post array using get_posts() in WordPress? Feb 22 WordPress: How to get ACF field values from another post?



You might also like these

How to create a Star Ratings using CSS?CSSPHP Login System using PDO Part 2: Login using Email or UsernamePHPHow to host Google fonts on your server and add them using CSS?CSSAvoid using new Array() in JavaScriptJavaScriptSQL GROUP BY StatementSQL/MySQLOrder By and Group By in PostgresPostgresUNION and UNION ALL in PostgresPostgresSocial Media Colors: Sass VariablesMiscOpen Source Security Tools for Defense SecurityMiscHow to overwrite file contents with new content in PHP?PHPWhat is Object Mutability in JavaScript?JavaScriptJavaScript String Properties and MethodsJavaScript