HuskyBlue HuskyBlue - 4 months ago 10
CSS Question

Responsively Positioning Elements Absolutely over Background

I have researched at least ten questions on Stack Overflow about this, but nothing seems to work. What I have are three elements that I want to stay in the same place even as the image responsively shrinks. Maybe you guys can help?



.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>





Like I said, I've spent hours looking through other questions and trying out the solutions, but nothing has worked. Thanks in advance!

Answer

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.