1

Como sobrepor uma div no rodapé de outra div igual as chamadas de conteúdo do WikiHow.

Olhando o código do CSS percebi que é aplicado position: absolute para a div2 posicionada no rodapé, mas não vi como ela fica posicionada de forma fixa no rodapé da div1.

Como a div2 está posicionada de acordo com a div1 e não com a página inteira?

Segue o código atual:

.publi{
    max-width: 230px;
    max-height: 300px;
    overflow: hidden;
}
.limt-img{
    width: 100%;
    height: 100%;
}
.img-publi{
    width: 100%;
    height: 100%;
}
.position-title{
    background-color: #292929CC;
    color: white;
    position: absolute;
    max-width: 230px;
    max-height: 300px;
    width: 100%;
}
<div class="publi">
    <div class="position-title">
        <span>Titulo</span>
    </div>
    <div class="limt-img">
        <img  class="img-publi" src="http://bit.ly/2ip2YvD" alt="FOTO"/>
    </div>
</div>

1 Resposta 1

2

Basta você definir o bottom da div que vai ficar por cima, e coloca a div pai com position relative.

.publi{
    max-width: 230px;
    max-height: 300px;
    overflow: hidden;
    position: relative;
}
.limt-img{
    width: 100%;
    height: 100%;
}
.img-publi{
    width: 100%;
    height: 100%;
}
.position-title{
    background-color: #292929;
    color: white;
    position: absolute;
    max-width: 230px;
    max-height: 300px;
    width: 100%;
    text-align:center;
    bottom: 5px;
}
                <div class="publi">
                    <div class="position-title">
                        <span>Titulo</span>
                    </div>
                    <div class="limt-img">
                        <img  class="img-publi" src="http://bit.ly/2ip2YvD" alt="FOTO"/>
                    </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 .