Как правильней наложить поверх картинки с ссылкой - текст, но уже с другой ссылкой?

_____________
Принимаю заказы, писать в ЛС

<a href='#'><img src=''></a>
<a href='2#'>Текст поверх картинки</a>

Position?

_____________
Принимаю заказы, писать в ЛС

<div style="postion: relative;">
    <a href="link1"><img src="img.png"></a>
    <a href="link2" style="postion: absolute; top: 10%; left: 10%;">текст</a>
</div>

Чего то не канает у меня

_____________
Принимаю заказы, писать в ЛС

опечатался в двух местах: postion -> position
а отредактировать уже не смог.

вот правильный вариант:

<div style="position: relative;">
    <a href="link1"><img src="img.png"></a>
    <a href="link2" style="position: absolute; top: 10%; left: 10%;">текст</a>
</div>

Да не опечатку я видел, но у меня работает только так:

<span>
    <a href="link1"><img src="img.png"></a>
     <a href="link2" style="position: relative; bottom: 90px; right: 20px">текст</a>
</span>

_____________
Принимаю заказы, писать в ЛС

так как вы описали - у вас ссылка находится в потоке вывода html, и соотв-но занимает место на странице. если для вас не критично - можно использовать и так.
но если текст на ссылке будет большой, то пустое место под картинкой будет большое.

чтобы избежать этого, создают блок, который описывают позицией relative.
в нем еще блок, который описывают позицией absolute, и двигают его парой параметров top/left/bottom/right относительно родительского блока relative.