How do I overlay images on top of other images? - html

Question

I am trying to overlay an image over another base image.
The images that I am using do not conform to a particular size but varies from page to page.
Each image overlay uses a style sheet similar to the one mentioned below:
#image1 {
position: absolute;
top: 44.594%;
left: 30.642%;
transform: translate(-50%, -50%);
}
The base image uses a style sheet similar to the one mentioned below:
.base-image {
position: relative;
text-align: center;
}
Thus far, if the image is smaller than the screen size I don't have any issues.
If it is larger than the current screen size, the positions are relative to the screen size.
If I change the base-image position to absolute, I do get the effect I am interested in but the rest of my page becomes hidden under the base-image.
Is there anything in CSS that I can do to achieve my desired effect?
One of the fragments of a page:
<div class="base-image">
<img src="Content/Images/baseimage.jpg" />
<div id="image1">
<img src="Content/Images/image1.jpg" alt="image1" />
<br />
<span>Some Text</span>
</div>
<div id="image2">
<img src="Content/Images/image2.jpg" alt="image2" />
<br />
<span>Some Text 2</span>
</div>
...
</div>
The question is similar but does not address my problem directly:
Html Image over image
Their solution is what I have been using thus far for me to overlay the image. But for some reason, when the image resolution is larger than the screen size, the resultant overlay appears to be scaled down to fit the screen resolution. The image locations are therefore all wrong with respect to the base image.

Answer 1

I am pretty sure you can make a <div> with the same position properties as your current picture and then have the pictures inside the <div> have a position:fixed and then move the pictures as you like with top:10%; left:10% and etc
Hope this helps