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

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to float an image around texts?CSSRIGHT JOIN in PostgresPostgresHow to create a sidebar using pure CSS?CSSCheck If a String Contains a Specific Word in PHPPHP4 different ways to create JavaScript ObjectsJavaScriptPagination in CSS with multiple examplesCSSThe fundamental difference between HAVING and WHERE clauses in PostgresPostgresHow to add a select dropdown in React?ReactHow to center an image horizontally and vertically?CSSA Step by Step Guide to Make RSS in XML For Any Website or Blog For FreeMiscellaneousCreate a menu with a curtain falling animation using CSS and JavaScriptCSS5 Key Principles Of Good Website UsabilityUI/UX