3

Não consigo fazer o texto "Texto que quero sobrepor." ficar em cima da div "textDiv" que esta com uma imagem como background, me ajudem por-favor.

HTML

<div class="divLeft">
    <img id="photo" src="photo.png">

    <div class="textDiv">
        <h2><i id="spaceText" class="fas fa-search"></i>Texto que quero sobrepor.</h2>
    </div>
</div>

CSS

.divLeft {
    width: 49.5%;
    height: 949px;
    float: left;
}

#spaceText {
    padding-right: 16px;
}

#photo {
    width: 1600px;
    height: 949px;
}
4
  • A div não tem imagem como background.
    – Meu ovo
    6/05/2018 às 22:33
  • tente usar um z-index no texto que você quer sobrepor
    – Chris
    6/05/2018 às 22:35
  • "ficar em cima da div "textDiv""... o texto está dentro da div... como assim ficar por cima?
    – Meu ovo
    6/05/2018 às 22:36
  • eu quero que o texto fique por cima da imagem 6/05/2018 às 23:02

1 Resposta 1

1

Coloque position: absolute na div .textDiv e position: relative na div .divLeft. Aí você posiciona como quiser com com top e left.

Lembrando que a imagem não é um background, é apenas uma imagem normal e você estará posicionando uma camada (a div .textDiv) sobre ela.

.divLeft {
    width: 49.5%;
    height: 949px;
    float: left;
    position: relative;
}

#spaceText {
    padding-right: 16px;
}

#photo {
    width: 1600px;
    height: 949px;
}

.textDiv{
   position: absolute;
   top: 0;
   left: 0;
   
   /*cor apenas para exmplo*/
   color: #fff;
}
<div class="divLeft">
    <img id="photo" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">

    <div class="textDiv">
        <h2><i id="spaceText" class="fas fa-search"></i>Texto que quero sobrepor.</h2>
    </div>
</div>

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 .