How to set position in css - html

Question

.top{
width:100%;
height:50vh;
background-color:red;
}
.bot{
width:100%;
height:50vh;
background-color:black;
}
.content{
position:relative;
width:50px;
height:50px;
background-color:white;
left: 0px;
bottom:0px;
}
<div class='top'>
<div class='content'>
</div>
</div>
<div class='bot'>
</div>
content is not laying on the inner bottom of the first div .top, why not position:relative bottom:0px works , while positioning on absolute it comes in bottom of the screen , so can I lay that div on the bottom of the first div .top using position absolute, content width height have to change though.

Answer 1

Add position: relative to .top and set position: absolute to .content
.top{
width:100%;
height:50vh;
background-color:red;
position:relative;
}
.bot{
width:100%;
height:50vh;
background-color:black;
}
.content{
position:absolute;
width:50px;
height:50px;
background-color:white;
left: 0px;
bottom:0px;
}
<div class='top'>
<div class='content'>
</div>
</div>
<div class='bot'>
</div>

Answer 2

bottom 0px not works with position relative , and if you want to do with postion relative i found a solution for you
.top{
width:100%;
height:50vh;
background-color:red;
}
.bot{
width:100%;
height:50vh;
background-color:black;
}
.content{
position:relative;
width:50px;
height:50px;
background-color:white;
left: 0px;
bottom: calc(-100% + 50px);
}
<div class='top'>
<div class='content'>
</div>
</div>
<div class='bot'>
</div>