I am trying to overlay an image on top of an image with HTML and CSS, but I tried with the following code
Two images are lined up and down.
Would you please give me some advice?

One day for cats
<p>I'm just sleeping.</p>


     vertical-align: bottom;
.relative {
    position: relative;
    width: 1000px;
.absolute {
    position: absolute;
    left: 30px;
    top: 0px;
  • Answer # 1

    There was no problem with the code posted here.

    The images also overlapped with my code.

  • Answer # 2

    How is it?

  • Answer # 3

    Is it possible to enclose the image you want to overlay on a div?

  • Answer # 4

    .relative {position: relative;}
    .relative img {position: absolute;}
    .relative img:nth-child(1) {top: 0;}
    .relative img:nth-child(2) {top: 100px;}

    Is this enough?
    Please change the value of top.