align title over images in flexbox when page resized

i want to have 4 links over a list of images inside a flexbox but when i resize the page the links go through the images, i believe its because the images and the links arent "related" and therefore padding and margin doesnt work between them, but i dont know how to fix it. im guessing i have to add specific position: commands to them both to make them related but i dont know.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const chapter1 = [];
for (let i = 1; i <= 49; i++){

chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}
const chapter2 = [{src: '../images/maps/76.jpg'}];
const chapter3 = [{src: '../images/maps/64.jpg'}];
const chapter4 = [{src: '../images/maps/98.jpg'}];

// Function to display images for the chosen chapter
function showImages(chapter) {
	
	const img_list = document.getElementById('imageList');
	img_list.replaceChildren();

    // Loop through the images in the selected chapter
    chapter.forEach(image => {
      
		const li = document.createElement('li');
		const img = new Image();
		
		img.src= image.src;
		img.alt=image.alt;
		li.append(img);
		
		const span = document.createElement('span');
		span.textContent = "Image";
		
		li.append(span);
		img_list.appendChild(li);
    });
  }

  // Add click event to the Chapter 1 link
  document.querySelector('#chapter1').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter1);
  });

  // Add click event to the Chapter 2 link
  document.querySelector('#chapter2').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter2);
  });

  document.querySelector('#chapter3').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter3);
  });

  document.querySelector('#chapter4').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter4);
  });

window.onload =  function(){
	document.body.style.opacity = 1
	showImages(chapter1);
}

<!-- language: lang-css -->

@charset "utf-8";
/* CSS Document */

body {
	background-image: url("../images/background-maps.jpg");
	background-repeat: no-repeat;
    background-size: cover;
    
	padding:0;
	margin:0;

    opacity: 0;
    transition: opacity 1s;

    /*animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;*/
}
/*@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}*/



.menu{
    background-color: rgba(255,255,255,0.5);
    
    justify-content: center;
    display: flex;
    margin: 0 auto;
    width:55%;
    height: 100%;
	padding:10px;
	position: relative;

    
}


.menu ul{
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menu li{
    width: 20%;
    min-width: 200px;
    margin: 15px;
    text-align: center;

}

.menu img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.menu li span{
	
	padding: 5px;
}

a{
	
	font-size: 20px;
	font-weight: 200;
	padding:5px;
	
}



h1{
	
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    font-size: 75px;
    text-align: center;
    text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;

    margin: auto;
	padding: 5px;
}

.mappages{
	padding: 5px;
	position: absolute;
	top: 8px;
	left: 16px;
	
}

<!-- language: lang-html -->

        <header>
            <h1>Map Gallery</h1>
        </header>
        
        
        <div class="menu">
            <ul id="imageList"></ul> 
			<div class="mappages">
				<a href="#" id="chapter1">Chapter 1</a>
				<a href="#" id="chapter2">Chapter 2</a>
				<a href="#" id="chapter3">Chapter 3</a>
				<a href="#" id="chapter4">Chapter 4</a>
        	</div>
            
        </div>

<!-- end snippet -->

1. Put "mappages" above the "imageList" and remove the absolute position from "mappages". Also you have to add "flex-wrap: wrap" to "menu".

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-html -->

<div class="menu">
  <div class="mappages"></div>
  <ul id="imageList"></ul>
</div>

<!-- end snippet -->

or

2. If you want to keep the order of the elements as it's now, then you can still use absolute position but you have to add padding-top at least 50-60px to the parent's element "menu" to fix the overlapping