Responsively Positioning Elements Absolutely over Background

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.