-2

Olá! Eu tenho um problema que em teoria é simples mas eu não consigo mais achar uma possível solução para ele. Meu cliente é vtex e eu tenho um selo de Últimas Oportunidades que é configurado quando o produto está configurado nessa coleção específico. O selo está aparecendo perfeitamente, então meu problema é só com seu posicionamento. Os selos vem por sua natureza na parte de cima do produto (como o ♡ do add aos favoritos), e o selo em questão funciona perfeitamente, alterando seu tamanho conforme a tela e mantendo sua posição, porém o cliente quer que esse selo em específico fique na parte de baixo.

Eu já tentei modificar o atributo top tanto da quanto da , só que em ambos os casos quando a largura da tela altera, esse atributo top acaba desconfigurando a posição do selo. Como faço para ele ficar "fixo" na parte de baixo?

Selo Última oportunidade

A estrutura do código (que eu não posso alterar) é:

<div class="styled__ShelfImageWrapper-sc-1aqe7sq-1 bOpakP is--image">
  <div class="styled__UltimaOportunidade-sc-ox4cng-0 div-imagem">
    <img src="/arquivos/mal-selo-ultima-oportunidades.png" class="styled__FlagImage-sc-ox4cng-1 imagem-selo">
  </div>
</div>

A classe da div está com position relative e a imagem com position absolute

1 Resposta 1

-3

Seu código não esta executando aqui no stackoverflow, então vou dar uma resposta menos específica por isso ok? Quando você usa position e espera ter adaptação, você precisa usar medidas relativas. A tela não pode ser relativa e a posição em medidas fixas como pixel. Portanto você deve se basear em algo que também seja relativo e usar medidas relativas como %, vh e etc... Agora falando em específico do seu problema, você pode dar top 100% no selo pra ele ultrapassar o fim do container da modelo, e depois usar a propriedade transform: translateY(-100%) pra ele voltar o próprio tamanho completo. Assim, ele sempre vai estar colado no fim do container da modelo independente de quanto isso ajuste. Aqui vai o código de exemplo, só clicar em executar para ver:

#box{
  position: relative;
  background-image: url('https://images-americanas.b2w.io/produtos/1823791448/imagens/modelos-de-roupas-vestidos-para-festa-casamento-formatura/1823791456_1_large.jpg');
  width: 500px;
  height: 500px;
}
#selo{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100%;
  transform: translateY(-100%);

}
  <figure id="box">
    <img id="selo" src="https://www.lojadascadeiras.com.br/campinas/media/imagens/selo-promo.png" alt="selo">
  </figure>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .