HTML/CSS: Relative/Absolute Positioning - html

Question

How do I lay an image (such as a circle) over a different image so that it always stays in the right place, regardless of image or browser resizing? Is there a way I can do this with divs?
**Update: Thank you for your help. I have attached some images of relevant html and css to illustrate what I'm trying to do. I'm hoping to get the circles to surround one person's face, even though the image itself resizes with the browser. Thanks!
Webpage Image HTML CSS

Answer 1

One way I would recommend would be to use position:relative on your circle image, add it after the image you want in on top of, and set the left value to -outerWidth of 1st image. You should also put both of these in a span and add css to prevent line break as well

Answer 2

The code below gives examples of circles that remain within their parent square, and can be positioned in proportion to their parent squares. I've created some CSS so that you can add a class to various divs to change their size, etc.
N.B. You cannot apply .large or .small to the circles, their size is proportional to their parent div, although this does not have to be the case.
.square {
width: 100px;
height: 100px;
background: blue;
text-align: center;
margin: 5px;
float: left;
}
.large {
height: 200px;
width: 200px;
}
.small {
height: 50px;
width: 50px;
}
.circle {
position: relative;
border-radius: 50%;
background: red;
color: white;
}
.center {
left: 25%;
top: 25%;
width: 50%;
height: 50%;
}
.left-center {
left: 0;
top: 25%;
width: 50%;
height: 50%;
}
.right-center {
left: 50%;
top: 25%;
width: 50%;
height: 50%;
}
<div class="square small">
<div class="circle left-center">
</div>
</div>
<div class="square">
<div class="circle center">
</div>
</div>
<div class="square large">
<div class="circle right-center">
</div>
</div>