dots Created with Sketch.
Yogesh Chauhan's Blog

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

in CSS on 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;
 } 
amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
What’s a Strict mode in JavaScript?JavaScriptHow to Commit and Rollback Changes in SQL?SQL/MySQLWhat happens when we add Numbers and Strings in JavaScript?JavaScriptIN Operator in PostgreSQLPostgresWhat is the best way to add JavaScript Code into HTML?HTMLSolution to Could not cast value of type ‘NSTaggedPointerString’ to ‘NSNumber’SwiftHow to remove WordPress TinyMCE Editor buttons?WordPressHow to solve “framework not found” error in Swift?SwiftThe fundamental difference between HAVING and WHERE clauses in PostgresPostgresHow to create flickering text using CSS?CSSMIN, MAX, COUNT, AVG and SUM in SQLSQL/MySQLHow to show widgets on the Appearance tab in WordPress?WordPress