Расположите текст на адаптивном изображении относительно определенной части изображения.

Question

У меня есть изображение, к которому нужно добавить текст (по причинам доступности).Изображение является отзывчивым с помощью класса начальной загрузки img-responseive.Текст должен оставаться в правой части изображения, даже если размер изображения изменяется.Есть ли способ сделать это с помощью CSS?

Вот базовый пример:

<style>
span#mad {
    position: relative;
    top: 440px;
    left: 440px;
}
</style>
<span id="mad">
    Madagascar
</span>
<div id="map">
    <img src="http://www.freeworldmaps.net/printable/africa/countries.png" 
    class="img-responsive"/>
</div>

https://jsfiddle.net/DTcHh/95125/

Метка Мадагаскара всегда должна оставаться над островом.

Answer 1

Вы можете использовать отношения «ребенок-родитель» с положением относительно родителя и абсолютным относительно ребенка, которого вы хотите позиционировать.

Так как <img> не может иметь детей.мы можем имитировать его, используя элемент div и добавляя как текст, так и img внутрь. Таким образом, мы можем иметь отношения потомок-родитель.

DEMO

div {
  display: inline-block;
  position: relative;
}

div>span {
  position: absolute;
  top: 0;
  right: 0;
}

<div>
  <img src="https://via.placeholder.com/300x200">
  <span>some text</span>
</div>

Answer 2

Непонятно, ищите ли вы статический или динамический текст, но звучит так: PopperJS - это то, что вы ищете.Если ваш img не заполняет весь div и это создает нежелательный пробел, присвойте img id идентификатор, чтобы вы могли ссылаться на него напрямую, а не на оберточный div.

var popper = new Popper(document.getElementById("mad"), document.getElementById("map"), {
    placement: 'bottom'
});