How to overlay a div in the footer of another div

Question

How to overlay a div in the footer of another div

Navigation

#1 by (2 votes)

1

Overlapping a div in the footer of another div equals content calls from WikiHow .

Looking at the CSS code I noticed that position: absolute is applied to div2 positioned in the footer, but I have not seen how it is fixedly positioned in the footer of div1.

How is div2 positioned according to div1 and not the entire 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>

html css

asked by anonymous 24.12.2016 / 01:05

1 answer

How to close a file in Java? Import error when sending simple email with python

score 2 · Accepted Answer

Just set the bottom of the div that will stay on top, and put the parent 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>