响应式地将元素绝对定位在背景之上

Question

我想将三个元素保留在图像相应缩小时的同一位置。

.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

将您的容器设为 相对位置 并在其上设置高度和宽度，因为您的容器的子级是绝对的。还要使您的 image 成为绝对位置和前 0 名。请参阅代码段。

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

我相信你希望它也随着图像响应地缩小而缩放，所以这实现了这种效果。

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

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

✔ 不需要固定的宽度和高度 image/wrapper，因此它是响应式的
✔ 减少 HTML 需要
✔ 除了不受支持的旧浏览器外，几乎适用于任何浏览器

这是一个很好的技巧，我用过 "banners" 跨图像和其他技术来将事物定位在图像上以获得效果。

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>

响应式地将元素绝对定位在背景之上

Responsively Positioning Elements Absolutely over Background

html

css

positioning

absolute

responsive