响应性定位元素绝对超越背景

Question

我想要将三个元素放在同一个地方，因为图像会相应缩小。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我相信你也希望它能随着图像的缩小而缩放，因此可以实现这种效果。

＆＃13;

＆＃13;

.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%;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我正在使用inline-block自动允许wrapper元素＆＃34;换行＆＃34;无论图像大小如何，图像周围都是如此。我还设置max-width: 100%将图像转换为响应图像（好吧，它只是在窗口调整大小时缩小）。由于这些点都是基于％的，因此当图像缩小时，它们会保持在正确的位置。

✔无需具有固定宽度和高度的图像/包装，因此它具有响应性 ✔需要更少的HTML ✔除了不受支持的旧浏览器之外，几乎适用于任何浏览器

这是一个很好的技巧，我已经习惯了这样的事情，比如＆＃34;横幅＆＃34;跨图像和其他技术将事物放在图像上以获得效果。

Answer 2

将容器设为位置相对，并在其上设置高度和宽度，因为容器的子项是绝对的。同时使您的图片绝对正位和前0名。请参阅代码段。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

设置img代码的宽度和高度。

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