How to Position One Image on Top of Another in Html

How do I position one image on top of another in HTML?

Ok, after some time, here's what I landed on:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

how to position the image on top of each other using 'position: absolute' without it overlays other section? HTML CSS

Set max-width: 100%; on your img so it can resize accordingly.

You can also try mt-4 which stands for margin-top: 1.5rem for additional spacing on the new section.

.container-home-about {
  padding-top: 65px;
  padding-bottom: 65px;
}

.row {
  height: 100%;
}

.about-content>p {
  font-size: 16px;
  font-weight: 400;
  color: #5d77aa;
}

.about-image {
  position: relative;
}

.img-bottom {
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
}

.img-top {
  position: absolute;
  z-index: 1;
  top: 80px;
  left: 75px;
}

img {
  max-width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <div class="home home-about">
    <div class="container container-home-about">
      <div class="row">
        <div class="col-xl-6 col-lg-6 col-md-6 left">
          <div class="about-content">
            <p style="max-width: 520px;">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
              desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
          </div>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 right">
          <div class="about-image">
            <img src="https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="Sample Image" class="img-bottom">
            <img src="https://images.unsplash.com/photo-1500630417200-63156e226754?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Sample Image" class="img-top">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="home home-partner mt-4" style="border-top: 1px solid #EAEAEA;">
    <div class="container container-home-partner">
      <div class="col-xl-3 col-lg-4 col-md-4 partner-title">
        <div class="title" style="z-index: 9;">World class brand</div>
        <div class="subtitle" style="z-index: 9;">Our Partners</div>
      </div>
    </div>
  </div>
</body>

CSS placing one image on top of another

I've added a wrapper div for those images, with position relative and changed .image { position: relative to absolute and it worked for me.
http://jsfiddle.net/uS7nw/2/

<div class="container">
    <div class="imageOne image"></div>
    <div class="imageTwo image"></div>
</div>

And

.container {
    position: relative;
}

.image {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

How to set an image on top of another image?

The key is to use percentages in combination with max-width.

The big image, you give it a max-width: 100%, therefor it will never be bigger as it own size, but also won't it be bigger as it's parent.

Wrap that image in a parent div. This div becomes a display: inline-block, so I will be as width as it's content. You place this div relative.

Then we add the little image inside the div and place it absolute. It's position then will be relative to the parent (div) and not the body. Give it a max-width of 25% (for example) and give it a top and left/right position in %.

HTML:

<div class="wrapper">
  <img class="big-img" src="big.png" />
  <img class="small-img" src="big.png" />
</div>

CSS:

.wrapper{
  display: inline-block;
  position:relative;
}
.big-img{
  width: 100%;
  max-width: 100%;
  border: 1px solid blue;
}
.small-img{
  border: 1px solid red;
  position:absolute;
  right: 10%;
  top: 10%;
  width: 25%;
  max-width:25%;
}

DEMO

Make the result window smaller and you'll see the images resize.

HTML CSS - Placing one image on top of another

Add the following css to the circle:

#circle{
 position:relative;
 z-index:1;
left:-100px;
}

Edited the fiddle:
https://jsfiddle.net/Debabrata89/qdd2z402/

Positioning and overlaying image on another image

Here's a simple example using divs instead of images: http://jsfiddle.net/sqJtr/

Basically, you put both of your images in the same container. Give the container a position that isn't static (in my example, relative). Then give the overlay image position: absolute and position it however you want using bottom and right.

Image in top right of other image?

The answer of @TheMaleBeyonce is right. with your current layout, you should make sure this div element is just used to surround the outer image, and make sure the width of the div is equal to the outer image.

Suppose the width of outer image is 200px, the right code as below:

<style>
.wrap {
  position: relative;
  width: 200px;
}

.inner {
  position: absolute;
  top: 0;
  right: 0;
}
</style>

<div class="wrap">
  <a href="https://example.com">
    <img src="image.png">
  </a>
  <a class="inner" href="https://example2.com">
    <img src="logo.png">
  </a>
</div>

the demo

How do I position one image directly over the other?

Add position: relative to .iconContainer so that the absolute positioning on the overlay image will be relative to it's parent. Then use top: 0; left: 50%; transform: translateX(-50%); on the overlay image to position it in the center of the container like the other image.

.footerContainer {  border-top: rgba(0, 0, 0, 0.8) 2px solid;  height: 5rem;  display: flex;  background-color: #e5e5e5;  background-size: cover;  margin: 0;  padding: 0;  text-align: center;  position: relative;}
.iconContainer {  width: 20%;  margin: auto;  position: relative;}

/* grey images */
.homeIcon {  text-align: center;  height: 71px;  margin: auto;  position: relative;}
.magIcon {  text-align: center;  height: 58px;  margin: auto;  position: relative;}
.newsIcon {  text-align: center;  height: 64px;  margin: auto;  position: relative;}
.eventIcon {  text-align: center;  height: 80px;  margin: auto;  position: relative;}
.socialIcon {  text-align: center;  height: 80px;  margin: auto;  position: relative;}

/* HOVER */

/* blue images */
.homeIconHover {  text-align: center;  height: 71px;  margin: auto;  opacity: 0;  position: absolute;  left: 50%;  top: 0;  transform: translateX(-50%);}
.iconContainer:hover .homeIconHover {  opacity: 1;}
.iconContainer:hover .homeIcon {  opacity: 0;}
.magIconHover {  text-align: center;  height: 58px;  margin: auto;  opacity: 0;  position: absolute;}
.iconContainer:hover .magIconHover {  opacity: 1;}
.iconContainer:hover .magIcon {  opacity: 0;}
.newsIconHover {  text-align: center;  height: 64px;  margin: auto;  opacity: 0;  position: absolute;}
.iconContainer:hover .newsIconHover {  opacity: 1;}
.iconContainer:hover .newsIcon {  opacity: 0;}
.eventIconHover {  text-align: center;  height: 80px;  margin: auto;  opacity: 0;  position: absolute;}
.iconContainer:hover .eventIconHover {  opacity: 1;}
.iconContainer:hover .eventIcon {  opacity: 0;}
.socialIconHover {  text-align: center;  height: 80px;  margin: auto;  opacity: 0;  position: absolute;}
.iconContainer:hover .socialIconHover {  opacity: 1;}
.iconContainer:hover .socialIcon {  opacity: 0;}

<div class="footerContainer">    <div class="iconContainer">        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->    </div>
    <div class="iconContainer">        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->    </div>    <div class="iconContainer">        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->    </div>    <div class="iconContainer">        <img class="homeIcon" src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/>  <!--grey image-->        <img class="homeIconHover" src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"/>  <!--blue image-->    </div></div>

How to place an image on top of another one

Use position: absolute for the about pic and you can put it anywhere you want. Also make sure to set #main-content-image to position: relative so it becomes the reference point for the about image.

edit: I've tested it with your html, and it works.

How to position an image on top of another

You should also set the left property of the logo:

.background {  display: inline-block;  position: relative;}
.logo {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  z-index: 2;}

<section id="home">  <div class="background">    <img src="https://picsum.photos/id/583/300/300" class="bg">    <img src="https://picsum.photos/id/237/100/100" class="logo">  </div></section>