画像の上に画像とボタンを重ねる方法

画像の上に画像とボタンを重ねる方法を教えて頂けないでしょうか。
載せたい画像は左上の青マーク（l-header__logoクラス）と右上のボタン（p-nav__buttonクラス）です。
絶対位置・相対位置を使う事はわかるのですが、実際にどのように書けばいいかがわかりませんでしたので、ご教示お願いいたします。

●理想↓

●現状↓

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <link rel="stylesheet" href="../../tools/style/reset.css" />
8    <link rel="stylesheet" href="./assets/stylesheets/style.css" />
9    <title>responsive-site</title>
10  </head>
11  <body>
12    <div class="l-wrapper">
13      <header class="l-header">
14        <img class="l-header__logo" src="./assets/images/logo.png" alt="ロゴ">
15        <nav>
16          <ul class="p-nav__menu">
17            <li class="p-nav__list">
18              <a href="" class="p-nav__button">home</a>
19            </li>
20            <li class="p-nav__list">
21              <a href="" class="p-nav__button">about</a>
22            </li>
23            <li class="p-nav__list">
24              <a href="" class="p-nav__button">access</a>
25            </li>
26            <li class="p-nav__list">
27              <a href="" class="p-nav__button">contact</a>
28            </li>
29          </ul>
30        </nav>
31      </header>
32      <div class="c-hero">
33        <h1 class="c-hero__title">Responsive Site</h1>
34      </div>
35    </div>
36  </body>
37</html>

css
1@charset "UTF-8";
2
3.l-header {
4  display: flex;
5  justify-content: space-between;
6  align-items: center;
7}
8
9.l-header__logo {
10  width: 90px;
11  height: 90px;
12  padding: 10px;
13}
14
15.p-nav__menu {
16  display: flex;
17}
18
19.p-nav__list {
20  margin-right: 40px;
21}
22
23.p-nav__button {
24  font-size: 150%;
25  text-decoration: none;
26}
27
28.c-hero{
29  position: relative;
30  height: 100vh;
31  background-image: url(../images/hero.jpg);
32  background-size: cover;
33}
34
35.c-hero__title{
36  position: absolute;
37  margin:0;
38  padding:0;
39  top: 50%;
40  left: 50%;
41  -ms-transform: translate(-50%,-50%);
42  -webkit-transform: translate(-50%,-50%);
43  transform: translate(-50%,-50%);
44  font-size: 50px;
45  color: #fff;
46}
47
48@media screen and (max-width: 768px) {
49  /* SP style */
50}
51@media screen and (min-width: 769px) {
52  /* PC style */
53}