Put div on bottom of div-CodePudding

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 >
  <h1 >Super Mario</h1>
  <div >
    <div >
      <a href="#home">About</a>
      <a href="#news">History</a>
    </div>
  </div>
</div>

It looks like this: But I want it to look like this:

CodePudding user response：

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

CodePudding user response：

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
}