06 Para saber mais: destacando o texto

Olá Marco! Tudo bem?

Existem algumas formas de posicionar o link na parte de cima da imagem, mas eu costumo gostar muito da abordagem do display: flex, pois é prática e amigável caso no futuro você queira tornar seu projeto adaptável à dispositivos móveis. Vamos lá:

Primeiro, você irá envolver o link e a imagem em uma div e atribuir a ela a classe container. Observe a seguir:

    <div class="container">
        <a href="https://www.alura.com.br/">Seu link</a>
        <img src="imagem.png" alt="Foto da Joana Santos programando">
    </div>

Agora, no arquivo CSS do seu projeto, você pode adicionar o display: flex à classe container, o que vai tornar sua div um contêiner flexível. Isso irá te permite alinhar seus elementos como quiser:

.container{
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    height: fit-content;
}

Além do display: flex, também adicionei:

• gap, que irá criar um espaço entre a imagem e o link;

• flex-direction: column, que aponta que os elementos serão distribuídos em coluna;

• align-items: center, para posicionar nossa div no centro da página;

• height: fit-content para dizer que a altura da div será exatamente a suficiente para acomodar a imagem e o link.

Assim, o link fica separado e acima da imagem, como você pode visualizar através dessa imagem do resultado:

Espero que essa resposta tenha te ajudado. Caso ainda tenha dúvidas, fico à disposição. Um abraço!