html - 如何使文本标签贴在 CSS 中的图像旁边？

Question

我在 Bootstrap 的模式中有一张图像，周围有文本标签。因此，当我缩小浏览器时，文本的位置至关重要(它必须响应准确)

我可以很容易地使用文本也在 png 中的图像来实现这一点，但我不喜欢它。

我尝试过的:

HTML:

<div class="modal-body">
<div class="container-fluid">
<img class="" src="img/panel/cutaway-drawing.png">
  <span class="a">Open frame technology</span>
  <span class="b">Roxul rock wool</span>
  <span class="c">Camira fabric</span>
  <span class="d">Damped membrane technology</span>
</div>
</div>

CSS:

.a {
  position: absolute;
  top: 55%;
}
.b {
  position: absolute;
  top: 25%;
}
.c {
  position: absolute;
  top: 55%;
  left: 70%;
}
.d {
  position: absolute;
  top: 25%;
  left: 70%;
}

这应该可以正常工作，除了我不知道为什么 .a .b .c .d 的绝对位置将 .modal-body 作为父级而不是 .container-fluid.

Answer 1

你需要添加 position:relative 到 .container-fluid