How to overlap a div in the footer of another div

Question

How to overwrite a div in the footer of another div equal to the content calls of Wikihow.

Looking at the CSS code I realized it is applied position: absolute for the div2 positioned at the baseboard, but I didn’t see how it is positioned fixed at the baseboard of the div1.

As the div2 is positioned according to the div1 and not with the full page?

Follow the current code:

.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>

Answer 1

Just you set the bottom of the div who will be on top, and puts the father div with 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>