ENGENHEIRO_DE_SOFTWA
Se usar um margin-top: -200px;
ele começa a “comer” a imagem
como resolver?
Acho assim, que possa ser algo com Z-INDEX, mas não tô sabendo configurar.
wldomiciano 1 like
O jeito que considero mais correto seria usar o absolute mesmo. Porque vc quer usar relative? Tava dando algum problema com absolute?
Uma alternativa seria colocar a imagem como background pelo CSS ao invés de usar a tag <img> .
Qualquer coisa, posta o código completo. De preferencia, tenta reproduzir ele no codepen.io ou jsfiddle.net e compartilha o link aqui.
ENGENHEIRO_DE_SOFTWA
o problema de utilizar com absolute é a responsividade.
wldomiciano
Não afetaria a responsividade.
Deve ter uma <div> que contém todos estes seus elementos, não tem?
Essa <div> deve ser relative, enquanto o conteúdo dela será absolute. Então o conteúdo seria absoluto, mas relativo com relação ao <div> pai. Sacou?
Testa este exemplo:
<style>
.box {
max-width: 700px;
height: 250px;
margin: auto;
text-align: center;
background-color: #aaa;
position: relative;
}
.box img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
.box .description {
position: absolute;
width: 100%;
bottom: 10px;
}
</style>
<div class="box">
<img src="https://via.placeholder.com/700x250">
<div class="description">
<h2>Produtor</h2>
<p>Conheça o nosso canal</p>
<div>◉ ◉ ◉</div>
</div>
</div>
<p>RESTO DO SITE</p>
Dá pra ver funcionando aqui: https://codepen.io/anon/pen/qJWdmq
Você só vai ter que arrumar um jeito da sua imagem não distorcer em certos tamanhos de tela.
E também o height da div.box tem que ser igual ao height da imagem usada.
A outra solução seria usar a imagem como background ao invés de inserir direto no HTML como sugeri acima.
Olha um exemplo aqui: https://codepen.io/anon/pen/VEZLBy
