How to keep the div fixed inside another div with absolute positioning - html

Question

On hover event I show a div which has absolute positioning, at the bottom of that div I need a fixed div.
Have a look at the image what I want to achieve.
I have following code for this:
CSS
.showpro{position:absolute;z-index:999;width:500px;height:auto;display:none;max-height:500px;}
.bottom{width:500px;position:fixed;bottom:0;left:0;}
CODE
<div class='showpro'>
<div class='top'>
</div>
<div class='bottom'>
</div>
</div>
With this code, it comes at left-bottom corner of Container div. Can anyone say why? Any help?

Answer 1

An element with position: fixed is always positioned relative to the browser window. Try using position: absolute for that "fixed" element.
Here is an example which shows your expected result.
.container{
position:relative;
width:100vw;
height:100vh;
background-color:brown;
}
.showpro{
position:absolute;
z-index:999;
width:200px;
height:auto;
max-height:300px;
padding-bottom:80px;
overflow:hidden;
background-color:red;
right:0;
}
.top{
overflow:auto;
max-height:220px;
margin-right: 20px;
}
.bottom{
width:200px;
position:absolute;
bottom:0;
left:0;
height:80px;
background-color:green;}
<div class="container"><div class='showpro'>
<div class='top'>
Here can be a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class='bottom'>
This is the "fixed" element.
</div>
</div></div>

Answer 2

Change position to relative for both the main div and the div inside main div :
Example: use this css code
#four {
background-color: blue;
height: 200px;
position: relative;
top: 50px;
width: 100px;
}