Why does an element positioned absolutely within a div that has relative positioning end up slightly lower than the bottom of the parent div? What can be done to fix this issue without just adjusting the bottom value on .hoverAction?
function showFileUploadDialog() {
//do stuff
}#avatarContainer{
display: inline-block;
position: relative;
}
.hoverAction{
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
color: white;
display: block;
width: calc(100% - 12px);
padding: 6px;
}
#avatar{
width: 200px;
height: 180px;
background-size: cover;
background-position: center;
border-radius: 1px;
background-color: #eeeeee;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
display: inline-block;
}<div id="avatarContainer">
<a class="popup-link" href="{{ anime.poster }}"><img id="avatar" style="background-image: url('http://www.herdofsquirrels.com/wp-content/uploads/2014/08/squirrel-nut-cute-animal-nature-grass-1920x1280.jpg');" /></a>
<a class="hoverAction" href="#" onclick="showFileUploadDialog(); return false;">Update Avatar</a>
</div>