Css, dois relativos, sobrepor

Front-end
#1

CSS:

.flexslider{
width: 100%;
position: relative;
z-index: -1;
}

.flex-caption p{
font-family: Lato;
position: relative;
text-align: center;
margin-top: -200px;
font-size: 50px;
color: #fff;
font-weight: bold;

}
.flex-caption h2{
font-family: Lato;
position: relative;
text-align: center;
z-index: 99;
font-size: 30px;
color: #fff;

}

.flex-control-nav{
width: 100%;
text-align: center;
position: relative;
margin-top: -30px;
z-index:9;
}

Quero colocar esses textos e botões tudo pra cima desse slider aí, antes estava quando era absolute, agora quero que fica como relative

image
image.jpg914×426 73.8 KB

#2

Se usar um margin-top: -200px;

image
image.jpg1405×227 111 KB

ele começa a “comer” a imagem
image
image.jpg1299×243 95.1 KB

como resolver?
Acho assim, que possa ser algo com Z-INDEX, mas não tô sabendo configurar.

#3

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.

1 curtida
#4

o problema de utilizar com absolute é a responsividade.

#5

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>&#9673; &#9673; &#9673;</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