Elias Santos23/11/2022 21:51

Ajuda com HTML e CSS

Preciso colocar imagens no canto direito do meu site, porém não estou conseguindo.

Alguém consegue me ajudar?

Comments (5)

Italo Nascimento - 24/11/2022 05:07

Bom dia, Elias!

Vou criar um exemplo utilizando a propriedade position com dois valores, o absolute e o fixed

Neste primeiro exemplo, a imagem vai ficar ao centro no canto direito da div, pois a imagem com id "my_img" tem a posição absoluta (absolute) com relação (relative) ao seu container pai, que no caso é a div com a classe "container".

/* CSS */
.container {
position: relative;
width: 100%;
height: 50vh;
}

#my_img {
position: absolute;
right: 1.250rem;
bottom: 50%;  
}

<!-- HTML -->
<div class="container">
<img src="imagem.png" alt="imagem" id="my_img" />
</div>

Neste outro exemplo, a imagem vai ficar fixa ao centro no canto direito com relação a página. portanto, sempre que você utilizar o scroll, a imagem vai continuar fixa e rolar junto com página.

/* CSS */
body {
position: relative;
width: 100%;
}

#my_img {
position: fixed;
right: 1.250rem;
bottom: 50%;  
}

<!-- HTML -->
<body>
<img src="imagem.png" alt="imagem" id="my_img" />
</body>

Você também pode estudar sobre flexbox e grid layout, pois eles resolvem muitos destes problemas. Agora, se for o caso de posicionar planos de fundo, sugiro que faça uma pesquisa sobre background-position. Espero ter ajudado!