Put div on bottom of div - html

Question

I have a div with a margin containing an image. I want to put another div inside that div and position it to the bottom of the parent div (Like even to the margin). However I'm unable to do that.
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
<div class="marioHeader">
<h1 class="title">Super Mario</h1>
<div class="headermario">
<div class="topnav">
About
History
</div>
</div>
</div>
It looks like this:
But I want it to look like this:

Answer 1

css solution would be like:
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
position: relative;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
position: absolute;
bottom: -40px;
}
otherwise you also could place the .topnav in the .marioHeader (pull it out of the .headermario class) and adjust it there. But to write this I require styling information of the .marioHeader class

Answer 2

The easiest way I can think of is with flex
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
display: flex;
flex-direction: column-reverse
}