Responsively Positioning Elements Absolutely over Background - html

Question

I have three elements that I want to keep in the same place as the image responsively shrinks.
.main
{
position: relative;
}
.container
{
display: inline;
}
.point
{
display: inline;
position: absolute;
max-width: 15%;
margin-right: 10px;
padding: 3px 7px 3px 5px;
font-size: 12px;
font-weight: bold;
color: #fff;
background: #ff0000;
border-radius(5px);
box-shadow(1px 2px 5px rgba(0,0,0,0.5));
}
.one
{
top: 40%;
left: 10%;
}
.two
{
top: 50%;
left: 40%;
}
.three
{
top: 75%;
left: 20%;
}
<div class="main">
<div class="container">
<div class="point one">1</div>
<div class="point two">2</div>
<div class="point three">3</div>
</div>
<img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky">
</div>

Answer 1

I believe you want it also to scale as the image scales down responsively, so this achieves that effect.
.wrapper {
position: relative;
display: inline-block;
}
.wrapper img { max-width: 100%; }
.point
{
position: absolute;
max-width: 15%;
margin-right: 10px;
padding: 3px 7px 3px 5px;
font-size: 12px;
font-weight: bold;
color: #fff;
background: #ff0000;
border-radius(5px);
box-shadow(1px 2px 5px rgba(0,0,0,0.5));
}
.one
{
top: 40%;
left: 10%;
}
.two
{
top: 50%;
left: 40%;
}
.three
{
top: 75%;
left: 20%;
}
<div class="main">
<span class="wrapper">
<img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky">
<span class="point one">1</span>
<span class="point two">2</span>
<span class="point three">3</span>
</span>
</div>
I am using inline-block to automatically allow the wrapper element to "wrap" around the image no matter what size the image is. I also set max-width: 100% to turn the image into a responsive image (well, it just scales down when the window resizes). Since the points are all %-based, they stay in the right position as the image scales down.
✔ No requirement to have a fixed width and height image/wrapper, so it's responsive
✔ Less HTML required
✔ Works on pretty much any browser besides unsupported old ones
This is a nice trick I've used to do things like "banners" across images and other techniques to position things over images for effects.

Answer 2

Make your container as position relative and set a height and width on it since the child of your container is absolute. Also make your image absolute positop and top 0. See snippet.
.container
{
width: 480px;
height: 360px;
position: relative;
z-index: 100;
position: relative;
}
.main img{
position:absolute;
top:0;}
.point
{
display: inline;
position: absolute;
max-width: 15%;
margin-right: 10px;
padding: 3px 7px 3px 5px;
font-size: 12px;
font-weight: bold;
color: #fff;
background: #ff0000;
border-radius(5px);
box-shadow(1px 2px 5px rgba(0,0,0,0.5));
}
.one
{
top: 40%;
left: 10%;
}
.two
{
top: 50%;
left: 40%;
}
.three
{
top: 75%;
left: 20%;
}
<div class="main">
<div class="container">
<div class="point one">1</div>
<div class="point two">2</div>
<div class="point three">3</div>
</div>
<img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky">
</div>

Answer 3

Set width and height for your img tag.
.main
{
position: relative;
}
.container
{
display: inline;
}
.point
{
display: inline;
position: absolute;
max-width: 15%;
margin-right: 10px;
padding: 3px 7px 3px 5px;
font-size: 12px;
font-weight: bold;
color: #fff;
background: #ff0000;
border-radius(5px);
box-shadow(1px 2px 5px rgba(0,0,0,0.5));
}
.one
{
top: 40%;
left: 10%;
}
.two
{
top: 50%;
left: 40%;
}
.three
{
top: 75%;
left: 20%;
}
img{
width:100%;
height:100%;
}
<div class="main">
<div class="container">
<div class="point one">1</div>
<div class="point two">2</div>
<div class="point three">3</div>
</div>
<img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky">
</div>